如何设置ID危险的LysetinerHTML?

我不太明白你的问题,但你想要这样的东西吗?

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

}

我看不出使用昆汀指出的危险的利赛坦。您只需使用设置状态:

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

但是,如果您想了解危险的lysetinerhtml,那么您可以找到一个示例 here 在文档中。

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

我已经添加了变量 showA 它是一个布尔值并控制 一 是否可见。

然后,在你的 <p> 您需要打印变量 <p>{this.state.showA && a}</p> . 这是一个短路评估,意味着如果 this.state.showA 为真,然后返回 一 . 否则,返回 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>