react组件传参
父组件向子组件传参使用props属性进行
子组件向父组件传参使用方法调用
<title>子组件向父组件传参</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { Component } = React;
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 }, function () {
this.props.changeF(this.state.count);
});
}}
>
点一下:{this.state.count}
</button>
</div>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = { fromChild: 0 };
this.changeFromChild = this.changeFromChild.bind(this);
}
changeFromChild(c) {
this.setState({
fromChild: c,
});
}
render() {
return (
<div>
<h5>子组件传递的数据位:{this.state.fromChild}</h5>
<br />
<Counter changeF={this.changeFromChild} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>