父子组件之间传值的方式

父子组件间的传值在React中主要有几种常见方式：

1. Props（属性）：这是最常用的方式，父组件通过props将数据传递给子组件。父组件创建子组件实例时，可以指定要传递的数据。子组件通过this.props访问这些数据。

// 父组件
function ParentComponent() {
  const valueToPass = 'example';
  return <ChildComponent value={valueToPass} />;
}

// 子组件
function ChildComponent(props) {
  console.log('Received prop:', props.value);
}

2. Context API：当父子组件不在同一个层次或者需要跨级通信时，可以使用Context。先创建一个Context对象，然后在其Provider组件中设置值，子组件则通过Consumer来获取值。

const MyContext = React.createContext();

function ParentComponent() {
  const value = 'example';
  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  // 使用value
}

3. Refs：对于DOM操作或者需要直接引用子组件的状态，可以使用refs。父组件通过ref持有子组件的引用，然后可以直接操作其状态或方法。

class ParentComponent extends React.Component {
  childRef = React.createRef();
  
  handleClick = () => {
    this.childRef.current.setValue('example');
  }
  
  render() {
    return (
      <ChildComponent ref={this.childRef} />
      <button onClick={this.handleClick}>Set Value</button>
    );
  }
}

function ChildComponent(props) {
  // ...
}