0%

React组件的父子传值

React 的父子传值,其实非常简单,但是网上基本都是这种的。

Class - 子组件通过 this.props 中获取数据

父组件要向子组件传递 dataFromParent 的值,注意代码中的 dataFromParent 就可以了

Parent.jsx

1
2
3
4
5
6
7
8
9
10
11
class Parent extends React.Component {
state = { data: 'Hello World' };
render() {
return (
<div>
<Child1 /> //no data to send
<Child2 dataFromParent={this.state.data} />
</div>
);
}
}

Child.js

1
2
3
4
5
class Child2 extends React.Component {
render() {
return <div>The data from parent is:{this.props.dataFromParent}</div>;
}
}

如果不知道 stateprops 都从哪里来,可以看一下 React.Component 文档就好啦

Function - 子组件通过函数的形参获取值

这儿抄一下 React 官方的 demo

父组件要向子组件传递 date 的值,注意代码中的 date 就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}

function tick() {
ReactDOM.render(<Clock date={new Date()} />, document.getElementById('root'));
}

setInterval(tick, 1000);

官方文档再此:**State and Lifecycle**