欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react -1.组件通信

程序员文章站 2022-06-06 19:54:47
...

父子组件通信

//要显示的内容
 <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)
	})
}