您的位置：首页 > Web前端 > React

React的组件间通信

2017-04-24 11:05 399 查看

一、React的单向数据流

React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。

二、React的组件间通信

1）父级-》子级

比较简单，直接调用时设置props值

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <meta charset="UTF-8" />
5     <title>菜鸟教程 React 实例</title>
6     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
7     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
8     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
9   </head>
10   <body>
11     <div id="example"></div>
12     <script type="text/babel">
13     var WebSite = React.createClass({
14       getInitialState: function() {
15         return {
16           name: "菜鸟教程",
17           site: "http://www.runoob.com"
18         };
19       },
20
21       render: function() {
22         return (
23           <div>
24             <Name name={this.state.name} />
25             <Link site={this.state.site} />
26           </div>
27         );
28       }
29     });
30
31     var Name = React.createClass({
32       render: function() {
33         return (
34           <h1>{this.props.name}</h1>
35         );
36       }
37     });
38
39     var Link = React.createClass({
40       render: function() {
41         return (
42           <a href={this.props.site}>
43             {this.props.site}
44           </a>
45         );
46       }
47     });
48
49     ReactDOM.render(
50       <WebSite />,
51       document.getElementById('example')
52     );
53     </script>
54   </body>
55 </html>

2）子级-》父级

用回调函数，传参

1 class Father extends React.Component{
2   constructor(props){
3     super(props);
4     this.state={
5       inputValue:""
6     }
7   }
8   //在回调函数里处理子级的输入
9   handleInputChange(e){
10     this.setState({
11       inputValue:e.target.value
12     });
13   }
14   render(){
15     return (
16       <div>
17       <span>输入为{this.state.inputValue}</span>
18       <Child  onChange={this.handleInput2Change.bind(this)} />
19       </div>
20     );
21   }
22 }
23 //通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数
24 class Child extends React.Component{
25    render(){
26     return (
27      <div>
28       <input value={this.props.value} onChange={this.props.onChange}/>
29      </div>
30     );
31 }
32 }
33 ReactDOM.render(
34   <Father />,
35   document.getElementById('root')
36 );

3）兄弟《-》兄弟：

按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。

1 class Form1 extends React.Component{
2   constructor(props){
3     super(props);
4     this.state={
5       input1Value:"",
6       input2Value:""
7     }
8   }
9   handleInput1Change(e){
10     const input1=e.target.value;
11     let input2=input1-1;
12     this.setState({
13       input1Value:input1,
14       input2Value:input2
15     });
16   }
17   handleInput2Change(e){
18     const input2=e.target.value;
19     let input1=input2-0 + 1;
20     this.setState({
21       input1Value:input1,
22       input2Value:input2
23     });
24   }
25   render(){
26     return (
27       <div>
28        输入框1：
29       <Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} />
30        输入框2：
31       <Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} />
32       </div>
33     );
34   }
35 }
36 class Input1 extends React.Component{
37   render(){
38     return (
39      <div>
40       <input value={this.props.value} onChange={this.props.onChange}/>
41      </div>
42     );
43   }
44 }
45 class Input2 extends React.Component{
46    render(){
47     return (
48      <div>
49       <input value={this.props.value} onChange={this.props.onChange}/>
50      </div>
51     );
52 }
53 }
54 ReactDOM.render(
55   <Form1 />,
56   document.getElementById('root')
57 );

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航