在事件-Reactjs之后更新html上的javascript變量

Question

我正在研究JSX，我有以下問題

JS

var results ="";
results = value that changes;

HTML

<div className="content" dangerouslySetInnerHTML={{__html: results}}></div>

我有按下按鈕時變化的變量結果。 最初的值是“”，並且在事件之后它變成另一個字符串。 我想在每次按下按鈕時顯示新字符串。 有什么建議么？

Answer 1

您應該將該變量添加到組件的狀態。 首先，添加

getInitialState() {
  return { value : "initialValue" };
}

或者如果使用ECMA6，

constructor(props) {
  super(props);
  this.state = { value : "initialValue" };
}

如果要更改它，請致電

this.setState({ value : "newValue" });

在render方法中，使用：

render() {
  return <div className="content" dangerouslySetInnerHTML={{__html: this.state.value}} />;
}

或類似的東西。 然后，當狀態發生變化時，React將重繪它，再次調用render 。

順便說一下，如果可能的話，你應該避免使用dangerouslySetInnerHTML SetInnerHTML。 如果您願意，您可以更多地評論您正在做什么，看看是否有其他選擇。

例如，如果您的值不包含HTML，則應使用：

render() {
  return <div className="content">{this.state.value}</div>;
}

哪個更好更安全:)