Question

我试图找到一种方法将参数和状态一起传递给ReactJs中的一个组件。

所以我的代码是这样的：

class Component_1 extends React.Component{

 constructor(){
    super();
    this.state = {
      initialState: false
    }
  }

  changeState(){
   this.setState({
     initialState: !this.state.initialState
   })
  }

  render(){
   return(
    <Component_2 blockName={this.changeState.bind(this)} />
   )
  }
}

class Component_2 extends React.Component{
 return(){
  render(
   <ul>
    <li className="lists">
     <div className="blocks" div_name={"about"} onClick={this.props.blockName.bind(this)}>
     //some more elements
     </div>
    </li>
    <li className="lists">
     <div className="blocks" div_name={"contact"} onClick={this.props.blockName.bind(this)}>
     //some more elements
     </div>
    </li>
   </ul>
  )
 }
}

我想要实现的是：单击div元素即“块”，在“Component_2”中，我想将状态和“div_name”属性从Component_2传递到Component_1到“changeState”（）“Component_1”的功能。

我能够获得状态，但不知道如何将属性值，即“div_name”从“Component_2”传递到“Component_1”。有没有办法从父母那里获取孩子的道具价值？

Answer 1

更改

<div className="blocks" div_name={"about"} onClick={this.props.blockName.bind(this)}>

到

<div className="blocks" data-name="about" onClick={({target: {dataset: {name}}}) => this.props.blockName(this.state, name)}>

并且它将作为第一个参数发送状态，并将字符串"about"作为blockName函数的第二个参数发送。

然后在Component_1更改

changeState(){
    this.setState({
        initialState: !this.state.initialState
    })
}

到

changeState(stateOfComponent2, theText) {
    // Do whatever needs to be done with stateOfComponent2 and theText variables.
    this.setState({
        initialState: !this.state.initialState
    })
}

但请注意，我只是在回答你的问题，＆＃34;如何做这些事情？＆＃34;但你做这件事的方式并不是最好的方法。您可能需要重新设计组件。我建议您花些时间为您的目的学习最佳实践。

在reactjs

1 个答案: