javascript - 事件发生后更新 html 上的 javascript 变量 - Reactjs

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。如果您愿意，您可以对您正在做的事情发表更多评论，看看是否有替代方案。

例如，如果您的值不包含 HTML，您应该使用:

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

哪个更好更安全:)