react -1.组件通信

父子组件通信

//要显示的内容
 <div id="app"></div>
  <script type="text/babel">
        class AppInput extends React.Component{
            render(){
                return (
                    <section>
                        <input type='text' 
                            ref={input=>this.inputVal = input}
                            placeholder='请输入工作'/>&nbsp;&nbsp;&nbsp;
                        <button onClick={()=>this.submitHandle()}>确定</button>
                    </section>
                )
            }
            submitHandle(){
                //调用父组件传入的方法
                this.props.addHandle(this.inputVal.value)
            }
        }
        
        function AppList(props){
           //遍历数组
            return(
                <ul>
                    {props.list.map((item,index)=>{
                        return (
                            <li key={index}>{item.name}</li>
                        )
                    })}
                 </ul>
            )
        }
        //设置父组件传入的属性值
        AppList.prototype={
            list:PropTypes.array.isRequired
        }
        class App extends React.Component{
            state={
                list:[]
            }
            render(){
                return (
                    <div>
                    //addHandle是父组件传递给子组件的事件，e是子组件传递给父组件的参数
                        <AppInput addHandle={e=>this.addHandle(e)}/>
                        //list是父组件传递给子组件的数据
                        <AppList list={this.state.list} />
                    </div>
                )
            }
            addHandle(item){
                let {list} = this.state;
                list.unshift({name:item});
                this.setState({list})；
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>

兄弟组件通信方式 使用pubsub-js

1.下载

npm install pubsub-js -- save

2)使用

import PubSub from 'pubsub-js'
//先发布消息
PubSub.publise('名称',传递的内容)
//接受数据
ComponentDidMount(){
	PubSub.scribe('名称'，(msg,data)=>{
		console.log(data)
	})
}