时间戳

首页 > 解决方案 > 如何使用三元运算符在渲染函数中显示反应变量

javascript - 如何使用三元运算符在渲染函数中显示反应变量

问题描述

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

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>
    );
  }
}

这是我的html：

<html>
  <head>
    <title>Font Chooser</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="FontChooser.js" type="text/jsx"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/jsx">

      ReactDOM.render(
      <div>
      <FontChooser min='4' max='40' size='16' text='Fun with React!' bold='false'/>
      </div>,
      document.getElementById('container'))
      ;
    </script>
  </body>
</html>

标签： javascripthtmlcssreactjs

解决方案

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

推荐阅读