在REACTjs中选中复选框时如何隐藏段落？

我是REACT的新手。我用几个组件创建了一个表单。在其中一个组件中，我有一个复选框和一个包含文本的段落。我不知道单击复选框时如何隐藏段落。布尔值在状态中被捕获，但不确定如何使用它来执行我想要的操作

class Anonymous extends React.Component{
  constructor(){
  super();
  this.state = {
  anon:false
}
  this.anonymousBox = this.anonymousBox.bind(this)
}

anonymousBox(event){
  this.setState({anon:event.target.checked})
}

render(){
  return(
  <span>
  <input type="checkbox" 
    name="anon" value="" 
    onChange={this.anonymousBox}
    checked={this.state.anon}
  /> Anonymous

  <p style={{backgroundColor:'yellow'}}>
    First Name: <br />
    Last Name: <br />
    Email: <br />
    Country: <br />
    Phone: <br />
  </p>
 </span>
  )
 }
}

---

可以根据状态有条件地呈现段落，如下所示：

{this.state.anon && <p style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>}

当然，您需要相应的CSS类来实现这一点。 也可以在内联样式中使用三元条件：

<p style={{ backgroundColor:'yellow', display: this.state.anon ? 'block' : 'none' }}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

在最后两个选项中，可以将“显示：无”替换为“可见性：隐藏”

您可以在的React文档中阅读有关在jsx中使用三元运算符的更多信息

哪个选项更好取决于用例，所以这取决于您

---

希望这对你有帮助，祝你好运

FYI条件和组件不等同于条件？组件：null。考虑这个DATAARAY.Load &组件：如果数据数组是空的，长度为0 Falsie，那么长度0将输出到渲染结果，而使用三进制将正确返回NULL。试试这个沙箱：除了条件和组件之外，我理解答案。组件是否被视为布尔值？这里的组件指的是React组件或任何其他HTML元素。三元组是计算为布尔值的表达式。所以组件有一个truthy值，有点像非空字符串或非零数字，如果条件为true，则会呈现组件，因为整个表达式的计算结果为true。如果条件为false，则整个表达式的计算结果为false，并且不会呈现组件。可以像true&&true===true表示渲染，false&&true==false表示不渲染。

<p className={this.state.anon ? "show" : "hide"} style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

<p style={{ backgroundColor:'yellow', display: this.state.anon ? 'block' : 'none' }}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>