Javascript 如何使用三元运算符在渲染函数中显示react变量

为什么不将“隐藏”添加到输入标记中

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hidden: true };
  }
  render() {
    console.log(this.state.hidden);

    return (
      <div>
        <input type="checkbox" id="boldCheckbox" {this.state ? 'hidden':'';}  />
       <button id="decreaseButton" hidden='true'>-</button>
        <span id="fontSizeSpan" hidden="true">
          {this.props.size}
        </span>
        <button id="increaseButton" hidden="true">
          +
        </button>
        <span id="textSpan">{this.props.text}</span>
      </div>
    );
  }
}

class FontChooser扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={hidden:true}；
}
render（）{
console.log（this.state.hidden）；
返回(
-
{this.props.size}
+
{this.props.text}
);
}
}

这是我的html：

字体选择器
ReactDOM.render(
,
document.getElementById（'container'））
;

或

---

您可以使用内联样式隐藏

<input type="checkbox" id="boldCheckbox" style={this.state.hidden ? {display: 'none'} : {} />

<input type="checkbox" id="boldCheckbox" className={this.state.hidden ? classes.hidden : ''} />

或者可以使用类来隐藏

<input type="checkbox" id="boldCheckbox" style={this.state.hidden ? {display: 'none'} : {} />

<input type="checkbox" id="boldCheckbox" className={this.state.hidden ? classes.hidden : ''} />

如果你只是不想渲染它

{!this.state.hidden &&
<input type="checkbox" id="boldCheckbox" />
}

{！this.state.hidden&&
}

是否希望隐藏为type属性或class属性的值？我只想将单词hidden添加到输入标记中，因为它不需要任何参数（如true或false）来完全隐藏它，或者只是禁用它？只是为了隐藏复选框不起作用，它添加class='hidden'，但我需要添加just hidden这两个选项都非常有效@DCR谁是“他们”？什么是“更新帖子”？这与你的问题和我绝对准确的答案有什么关系？奇怪…@DCR你可以通过我在上面发布的代码笔链接来查看它是否有效，但是如果你个人认为它不起作用-运气不好，谢谢你的提问你的例子没有反映这个问题。将reatDOM.render移到html文件中，您将看到您的答案不起作用，甚至对您也不起作用。回答得好。他还可以将三元组放入

type

属性中，因此

type

是

hidden

或

复选框

{!this.state.hidden &&
<input type="checkbox" id="boldCheckbox" />
}