React之组件传值的几种方式

绝地灬酷狼 2022-12-26 10:22 233阅读 0赞

[https://blog.csdn.net/amyloverice/article/details/80728983][https_blog.csdn.net_amyloverice_article_details_80728983]

[https://www.jianshu.com/p/77467c15a0ce][https_www.jianshu.com_p_77467c15a0ce]

1、父子传值

父传值：<子的标签 value={'aaa'} index={'bbb'}></子的标签>
    
    子接值：<li key={this.props.index}>{this.props.value}</li>
    
    <User user={username: 'Jerry', age: 21, gender: 'male'} />
    
    class User extends Component{
      render(){
        const {user} = this.props
        return (
          <div>
            <div>姓名：{user.username}</div>
            <div>年龄：{user.age}</div>
            <div>性别：{user.gender}</div>
            <hr />
          </div>
        )
      }
    }
    
    下面为子传父
    子：
    class Son extends React.Component{
          fn1(){
            this.props.onClick('值给父组件') //传的事件对应父组件的事件
          }
          render(){
            return(
              <div>
                <span onClick={this.fn1.bind(this)}>{this.props.data.title}</span>
              </div>
            )
          }
        }
    
    父：
    class Father extends React.Component{
          constructor(props){
            super(props);
            this.state = {
              title:'父组件给子组件的值'
            }
          }
          fn2(prama){
            console.log(prama) //值给父组件
          }
          render(){
            return(
              <Son data={this.state} onClick={this.fn2.bind(this)}/>
            )
          }
        }
    
    
    <Card content={<div><h2>React.js 小书</h2></div> } />
    class Card extends Component{
      render(){
        return (
          <div className='card'>
          <div className='card-content'>
            {this.props.content}
          </div>
        </div>
        )
      }
    }

不止可以传值也可以传递方法：

父：方法=\{this.方法\}

子：\{this.props.方法.bind(this)\}

### 二、子组件传给父组件 ###

父组件通过props向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；

//父组件
    import Child from './Child.js'；
    export default class Parent extend compenent{
      getData=(data)=>{
        console.log(data);
      }
      render(){
        return (
          <div>
            父组件
            <Child getData={this.getData}/>
          </div>
        )
      }
    }

//子组件
    export default class Child extend compenent{
      state={
        data:[1,2,3]
      }
      render(){
        const {data}=this.state;
        return (
          <div>
            子组件
            <button onClick={()=>{this.props.getData(data)}}><button>
          </div>
        )
      }
    }

[https_blog.csdn.net_amyloverice_article_details_80728983]: https://blog.csdn.net/amyloverice/article/details/80728983
[https_www.jianshu.com_p_77467c15a0ce]: https://www.jianshu.com/p/77467c15a0ce