如何在 React 中更改 div 的 innerHtml？

Question

我是 React 的新手。我有 6 个 div，每当我打电话时，foo()我想在第一个为空的 div 中添加一个数字。

例如，假设六个 div 的值为 1,2,0,0,0,0，当我调用时foo()，我想要 1,2,3,0,0,0。

这是我尝试过的：

var index = 1;

function foo() {

    let var x = document.getElementsByClassName("square") // square is the class of my div

    x[index-1].innerHTML = index.toString() 

    index++;

}

不知道什么时候该打电话foo()，也不知道该怎么写foo()。

Answer 1

“React 方式”是这样想的：给定数据的 UI 应该是什么样的？如何更新数据？将您的问题描述转换为这种想法，我们将从一个包含六个值的数组开始。对于这些值中的每一个，我们将渲染一个 div：const data = [0,0,0,0,0,0];&nbsp;&nbsp;function MyComponent() {&nbsp;&nbsp;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {data.map((value, i) => <div key={i}>{value}</div>)}&nbsp; &nbsp; </div>&nbsp;);}ReactDOM.render(<MyComponent />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>现在我们可以渲染数据了，我们将如何改变它呢？从您的描述看来，每次调用函数时，您都希望0将数组中的第一个值更改为另一个值。这可以通过以下方式轻松完成：// Find the index of the first 0 valueconst index = data.indexOf(0);if (index > -1) {&nbsp; // if it exists, update the value&nbsp; data[index] = index + 1;}为了让 React 正常工作，我们必须做两件事：跟踪状态中更新的数据，以便 React 在组件发生更改时重新渲染组件，并以创建新数组而不是改变现有数组的方式更新数据大批。您没有解释如何/何时调用该函数，因此我将添加一个触发此类函数的按钮。如果功能触发不同，那么组件当然需要相应地调整。function update(data) {&nbsp; const index = data.indexOf(0);&nbsp; if (index > -1) {&nbsp; &nbsp; data = Array.from(data); // create a copy of the array&nbsp; &nbsp; data[index] = index + 1;&nbsp; &nbsp; return data;&nbsp; }&nbsp; return data;}&nbsp;&nbsp;function MyComponent() {&nbsp; var [data, setData] = React.useState([0,0,0,0,0,0]);&nbsp;&nbsp;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {data.map((value, i) => <div key={i}>{value}</div>)}&nbsp; &nbsp; &nbsp; <button onClick={() => setData(update(data))}>Update</button>&nbsp; &nbsp; </div>&nbsp;);}ReactDOM.render(<MyComponent />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

Answer 2

如果你需要设置innerHTML一个 React 组件的，你可以试试这个：return&nbsp;<div&nbsp;dangerouslySetInnerHTML={foo()}&nbsp;/>;foo()这里返回您要在 div 中发布的值。但在我看来，你对这个问题的思考方式是错误的。React 很酷，但逻辑与普通编程有点不同：D

Answer 3

您将使用 state 来保存该值，然后显示该变量的值。如果您使用的是功能组件：const App = () => {&nbsp; &nbsp; const [values, setValues] = React.useState([0, 0, 0, 0, 0, 0]);&nbsp; &nbsp; const [index, setIndex] = React.useState(0);&nbsp; &nbsp; const foo = () => {&nbsp; &nbsp; &nbsp; &nbsp; const tempValues = [...values];&nbsp; &nbsp; &nbsp; &nbsp; tempValues[index] = index;&nbsp; &nbsp; &nbsp; &nbsp; setValues(tempValues);&nbsp; &nbsp; &nbsp; &nbsp; setIndex((index + 1) % values.length);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { values.map((value) => <div key={`square-${value}`}>{value}</div>) }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={ foo }>Click me</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );};在基于类的组件中：constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; values: [0, 0, 0, 0, 0, 0],&nbsp; &nbsp; &nbsp; &nbsp; index: 0&nbsp;&nbsp; &nbsp; };&nbsp; &nbsp; this.foo = this.foo.bind(this);}foo() {&nbsp; &nbsp; const tempValues = [...values];&nbsp; &nbsp; const newIndex = index + 1;&nbsp; &nbsp; tempValues[newIndex] = newIndex;&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; values: tempValues,&nbsp; &nbsp; &nbsp; &nbsp; index: newIndex&nbsp; &nbsp; });}render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { values.map((value) => <div key={`square-${value}`>value</div>) }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={ this.foo}>Click me</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}