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 (
{props.message}
);
}
export default ChildComponent;
``
在这个例子中，父组件通过
子组件向父组件传值
子组件可以通过回调函数向父组件传递数据。我们可以在父组件定义一个方法，并将其作为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中几种常见的组件间传值的方法。
