Question

class App extends React.Component {
    constructor() {
      super();
      this.onClick = this.onClick.bind(this);
      this.state = {
        a: 5
      };
  }

  onClick () {
    document.getElementById('test').innerHTML= this.state.a;
  }

  render() {
    const { a } = this.state;

    return ( 

      <div>
        <button onClick={this.onClick}> Click</button>
        <p id="test"></p>
      </div>
    )
  }
}


React.render(<App />, document.getElementById('app'));

https://codepen.io/milo-boyd/pen/vaxzOY

如何使用dragonallySetInnerHTML编写此代码？我不想innerHTML。当我单击按钮时，它应该写为5。

Answer 1

我没有看到Quentin指出的使用危险的SetInnerHTML的任何观点。您可以只使用set状态：

class App extends React.Component {
    constructor() {
    super();
      this.onClick = this.onClick.bind(this);
    this.state = {
      a: null // set initial value
    };
  }

  onClick () {
    this.setState({a: 5})
  }

  render() {
    const { a } = this.state;

    return ( 

      <div>
      <button onClick={this.onClick}> Click</button>
       <p id="test">{a}</p>
    </div>
    )
  }
}


React.render(<App />, document.getElementById('app'));

但是，如果您想学习危险地设置InnerHTML，则可以在文档中找到示例here。

Answer 2

我不太了解您的问题，但是您想要这样的东西吗？

class App extends React.Component {

 state = {
  a: null
 }

 onClick = ()=>{
  this.setState({a:5})
 }

 render() {
  const { a } = this.state;

  return (

  <div>
    <button onClick={this.onClick}> Click</button>
    <p dangerouslySetInnerHTML={{__html:a}}></p>
  </div>
  )
 }

}

Answer 3

您将需要某种状态变量来控制是否显示a。下面是一个工作示例：

我添加了变量showA，它是一个布尔值，用于控制a是否可见。

然后，在<p>内，需要使用<p>{this.state.showA && a}</p>打印变量。这是短路评估，表示如果this.state.showA为真，则返回a的值。否则，返回false，这不会在DOM中呈现任何内容。

我也删除了id="test"，因为它不再需要了。

class App extends React.Component {
  constructor() {
    super();
      this.onClick = this.onClick.bind(this);
      this.state = {
        a: 5,
        showA: false
      };
  }
  
  onClick () {
    this.setState(prevState => ({showA: !prevState.showA}));
  }
  
  render() {
    const { a } = this.state;
    return (      
      <div>
        <button onClick={this.onClick}> Click</button>
        <p id="test">{this.state.showA && a}</p>
      </div>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如何设置id危险地设置InnerHTML？

3 个答案: