Question

我有以下父/子组件：

父：

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

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

子：

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

渲染：

<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>

我想根据点击的项目启用/禁用Child this.props.children。单击该按钮也应禁用该项目。请注意，孩子的this.props.children可以保留任何内容..单选按钮，复选框，下拉列表等。在声明之前无法知道它将保留什么。

我怎样才能做到这一点？

Answer 1

如果我理解您的情况，那么您需要点击父组件中的<div>来确定儿童组件的子组件是否呈现

在这种情况下，作为子模式的功能可能会有所帮助。

首先，您可以在父组件的状态中设置一个标记，并在单击<div>时切换它。

然后，您可以将子项渲染为函数并传递旗帜：

// Parent
// ...

state = { flag: false }

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

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

// ...

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

// 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>

// ...

现在，您可以使用子组件中的 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> 
  )
}

// ...

希望这有帮助。

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

1 个答案: