美文网首页
react组件通信

react组件通信

作者: 鹿啦啦zz | 来源:发表于2020-05-26 20:04 被阅读0次

    父->子通信
    父组件向子组件传值

    使用组件属性的形式父组件给子组件传值。比如:我们在<XiaojiejieItem>组件中加入content属性,然后给属性传递{item},这样就完成了父组件向子组件传值。

    <XiaojiejieItem content={item} />
    

    现在值已经顺利的传递了过去,这时候可以通过this.props.xxx的形式进行接受,比如传递过来的值,可以用如下代码进行接收。

    import React, { Component } from 'react'; //imrc
    class XiaojiejieItem  extends Component { //cc
    
        render() { 
            return ( 
                <div>{this.props.content}</div>
             );
        }
    }
    
    export default XiaojiejieItem;
    

    绑定函数时,注意bind(this)
    以后写函数时就能正确

    <ul>
        {
            this.state.list.map((item,index)=>{
                return (
                    <XiaojiejieItem 
                    key={index+item}  
                    content={item}
                    index={index}
                    list={this.state.list}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                )
            })
        }
    </ul> 
    

    相关文章

      网友评论

          本文标题:react组件通信

          本文链接:https://www.haomeiwen.com/subject/sdbxyhtx.html