在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。另，React 中组件间通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性。
然而在我们的开发中会有一些特殊的需求，需要子组件控制父组件的状态，或者无关系组件之间的通信。那么，更全面的组件间通信形式该怎么实现呢？
子父组件
需要父组件给子组件一个方法去修改自己的数据，子组件里边调用父组件的方法修改数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 核心 -->
<script src="../build/react.min.js"></script>
<!-- 渲染dom -->
<script src="../build/react-dom.min.js"></script>
<!-- 把jsx、es6转换成js、es5 -->
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
var Button = React.createClass({
changeNumber:function () {
this.props.add()
},
render:function () {
return (
<div>
<p onClick={this.changeNumber}>子组件按钮++</p>
</div>
)
}
})
var Box = React.createClass({
getInitialState:function () {
return{
number:1
}
},
addNumber:function () {
this.setState({
number:this.state.number+1
})
},
render:function () {
return (
<div>
<p>数量:{this.state.number}</p>
<button onClick={this.addNumber}>按钮++</button>
<Button add={this.addNumber}/>
</div>
)
}
})
ReactDOM.render(<Box/>,document.getElementById("root"))
</script>
</html>
兄弟组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 核心 -->
<script src="../build/react.min.js"></script>
<!-- 渲染dom -->
<script src="../build/react-dom.min.js"></script>
<!-- 把jsx、es6转换成js、es5 -->
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
var Text = React.createClass({
render:function () {
return (
<p>{this.props.children}</p>
)
}
});
var Btn = React.createClass({
ChangeNumber:function () {
this.props.add()
},
render:function () {
return(
<p onClick={this.ChangeNumber}>{this.props.children}</p>
)
}
});
var Box = React.createClass({
getInitialState:function () {
return{
number:1
}
},
addNumber:function () {
this.setState({
number:this.state.number+1
}
)
},
render:function () {
return (
<div>
<Text>数量：{this.state.number}</Text>
<Btn add={this.addNumber}>按钮</Btn>
</div>
)
}
});
ReactDOM.render(<Box/>,document.getElementById("root"))
</script>
</html>
网友评论