Javascript 根据单击的项目启用/禁用子组件中的this.props.children

我有以下父/子组件：

家长：

handleClick = (e) => {
   console.log(e.target)
}

render () {
  <div onClick={this.handleClick}>
    {this.props.children}
  </div>
}

handleClick=（e）=>{
console.log（例如target）
}
渲染（）{
{this.props.children}
}

儿童：

render() {
  return (
    <div>
       <div>More content here</div>
       <input type="checkbox" name="vehicle" value="Bike">Checkbox</input>
       <div>{this.props.children}</div> 
    </div> 
  )
}

render（）{
返回(
这里有更多内容
复选框
{this.props.children}
)
}

呈现：

<Parent>
   <div>
     <div>I am a checkbox 
       <Child>
         <input type="radio" name="gender" value="male"> Male<br>
       </Child>
     </div>
     <div>I am checkbox 2 <Child /></div>
   </div>
</Parent>

我是一个复选框
男性

我是2号复选框

我想要一种基于单击的项目启用/禁用孩子的

this.props.children

的方法。单击“离开”也应禁用该项目。请注意，Child的

this.props.children

是开放的，可以存放任何东西。。单选按钮、复选框、下拉列表等。在声明之前，无法知道它将包含哪些内容

---

如何实现这一点？

如果我正确理解您的情况，那么您需要单击父组件中的

，以确定子组件的子组件是否渲染

在这种情况下，函数作为子函数模式可能会有所帮助

首先，您可以在父组件的状态中设置一个标志，并在单击

时将其切换

然后，可以将子级作为函数呈现，并传递标志：

// Parent
// ...

state = { flag: false }

handleClick = () => {
  this.setState({ flag: !this.state.flag })
}

render () {
  <div onClick={this.handleClick}>
    {this.props.children(this.state.flag)}
  </div>
}

// ...

//父对象
// ...
状态={flag:false}
handleClick=（）=>{
this.setState（{flag:！this.state.flag}）
}
渲染（）{
{this.props.children（this.state.flag）}
}
// ...

然后，您可以使用一个函数作为父组件的子组件来访问该标志并将其传递给子组件：

// Render
// ...

<Parent>
  {(flag) =>
    <div>
      <div>I am a checkbox 
        <Child show={flag}>
          <input type="radio" name="gender" value="male"> Male<br>
        </Child>
      </div>
      <div>I am checkbox 2 <Child /></div>
    </div>
  }
</Parent>

// ...

//渲染
// ...
{（标志）=>
我是一个复选框
男性

我是2号复选框
}
// ...

现在，您可以使用子组件中的show道具有条件地渲染其子组件：

// Child
// ...

render() {
  return (
    <div>
      <div>More content here</div>
      <input type="checkbox" name="vehicle" value="Bike">Checkbox</input>
      <div>{this.props.show && this.props.children}</div> 
    </div> 
  )
}

// ...

//子对象
// ...
render（）{
返回(
这里有更多内容
复选框
{this.props.show&&this.props.children}
)
}
// ...

---

希望这会有所帮助。

一种方法是将状态作为道具从父组件传递给子组件。我更新了我的问题，使之更清楚。Child现在有了一个

this.props.children

，我想要一种基于单击的孩子禁用/启用的方法。