react 组件传值

在React中，组件之间的传值是一个常见的需求。主要的解决方案包括：通过props从父组件向子组件传递数据；使用回调函数从子组件向父组件传递数据；以及利用React Context实现跨层级组件间的通信。

父组件向子组件传值

最常见的方式是通过props属性将数据从父组件传递给子组件。下面是一个简单的例子：

jsx
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';</p>

<p>class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "Hello from parent!"
        };
    }</p>

<pre><code>render() {
    return (
        <div>
            <ChildComponent message={this.state.message} />
        </div>
    );
}

}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
return (

);
}

export default ChildComponent;
``
在这个例子中，父组件通过message`属性将"Hello from parent!"这条消息传递给了子组件。

子组件向父组件传值

子组件可以通过回调函数向父组件传递数据。我们可以在父组件定义一个方法，并将其作为prop传递给子组件。子组件可以调用这个方法来通知父组件某些事件或状态的变化。

```jsx
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = { childMessage: '' };
this.receiveMessage = this.receiveMessage.bind(this);
}

receiveMessage(message) {
    this.setState({ childMessage: message });
}

render() {
    return (
        <div>
            <ChildComponent sendMessageToParent={this.receiveMessage} />
            <p>Message from child: {this.state.childMessage}</p>
        </div>
    );
}

}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
const handleClick = () => {
props.sendMessageToParent("Hello from child!");
};

return (
    <button onClick={handleClick}>Send Message</button>
);

}

export default ChildComponent;

跨层级组件传值 - 使用Context

当需要在一个组件树中传递数据时，如果使用props逐层传递会非常繁琐。此时可以考虑使用React Context。Context提供了一种在组件树中传递数据的方法，而无需手动将props逐层传递。

创建一个Context对象：
```jsx
import React from 'react';

const MyContext = React.createContext();
```

然后在需要共享数据的组件树顶层使用Provider来提供数据：
jsx
<MyContext.Provider value="Some Value">
<ChildComponent />
</MyContext.Provider>


在任何后代组件中都可以通过Consumer来消费这个数据：
jsx
function ChildComponent() {
return (
<MyContext.Consumer>
{value => <p>{value}</p>}
</MyContext.Consumer>
);
}


以上就是在React中几种常见的组件间传值的方法。

// 来源：https://www.nzw6.com