如何在 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方式”是这样想的：

1. 给定数据的 UI 应该是什么样的？
2. 如何更新数据？

将您的问题描述转换为这种想法，我们将从一个包含六个值的数组开始。 对于这些值中的每一个，我们将渲染一个 div：

 const data = [0,0,0,0,0,0]; function MyComponent() { return ( <div> {data.map((value, i) => <div key={i}>{value}</div>)} </div> ); } 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 value
const index = data.indexOf(0);
if (index > -1) {
  // if it exists, update the value
  data[index] = index + 1;
}

为了使 React 正常工作，我们必须做两件事：跟踪状态中更新的数据，以便 React 在组件更改时重新渲染组件，并以创建新数组而不是改变现有数组的方式更新数据大批。

你没有解释函数是如何/何时被调用的，所以我将添加一个按钮来触发这样的函数。 如果函数的触发方式不同，那么当然需要相应地调整组件。

 function update(data) { const index = data.indexOf(0); if (index > -1) { data = Array.from(data); // create a copy of the array data[index] = index + 1; return data; } return data; } function MyComponent() { var [data, setData] = React.useState([0,0,0,0,0,0]); return ( <div> {data.map((value, i) => <div key={i}>{value}</div>)} <button onClick={() => setData(update(data))}>Update</button> </div> ); } 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

您将使用 state 来保存值，然后显示该变量的值。

如果您使用的是功能组件：

const App = () => {
    const [values, setValues] = React.useState([0, 0, 0, 0, 0, 0]);
    const [index, setIndex] = React.useState(0);

    const foo = () => {
        const tempValues = [...values];
        tempValues[index] = index;
        setValues(tempValues);
        setIndex((index + 1) % values.length);
    }

    return (
        <div>
            { values.map((value) => <div key={`square-${value}`}>{value}</div>) }
            <button onClick={ foo }>Click me</button>
        </div>
    );
};

在基于类的组件中：

constructor(props) {
    super(props);

    this.state = {
        values: [0, 0, 0, 0, 0, 0],
        index: 0 
    };

    this.foo = this.foo.bind(this);
}

foo() {
    const tempValues = [...values];
    const newIndex = index + 1;
    tempValues[newIndex] = newIndex;

    this.setState({
        values: tempValues,
        index: newIndex
    });
}

render() {
    return (
        <div>
            { values.map((value) => <div key={`square-${value}`>value</div>) }
            <button onClick={ this.foo}>Click me</button>
        </div>
    );
}

Answer 3

如果你需要设置一个 React 组件的innerHTML ，你可以试试这个：

return <div dangerouslySetInnerHTML={foo()} />;

此处的foo()返回您要在 div 中发布的值。

但在我看来，你对这个问题的思考方式是错误的。

React 很酷，但逻辑与普通编程有点不同 :D

Answer 4

理想的方法是让 React 创建 div（使用其渲染方法）。 然后您可以从数组中传递一个变量，该变量存储在您的状态中。 然后您只需要在状态中更改此数组，它就会反映在您的视图中。 如果您需要一个工作示例，请告诉我。

但是，如果要更新不是使用 react 创建的 div，则需要使用脏的方法。 如果您无法从 react 生成视图，我建议不要使用 react。

Answer 5

React 很好地分离了视图和数据之间的关注点。 所以这个例子的state概念对于存储数据很有用。 还有JSX ，React“模板”语言，用于显示视图。

我提出这个解决方案：

import React from "react";

class Boxes extends React.Component {
  state = {
    divs: [1, 2, 3, 0, 0, 0]
  };

  add() {
    // get the index of the first element equals to the condition
    const index = this.state.divs.findIndex(elt => elt === 0);
    // clone the array (best practice)
    const newArray = [...this.state.divs];
    // splice, i.e. remove the element at index AND add the new character
    newArray.splice(index, 1, "X");

    // update the state
    // this is responsible, under the hood, to call the render method
    this.setState({ divs: newArray });
  }

  render() {
    return (
      <div>
        <h1>Boxes</h1>
        {/* iterate over the state.divs array */}
        {this.state.divs.map(function(elt, index) {
          return (
            <div
              key={index}
              style={{ border: "1px solid gray", marginBottom: 10 }}
            >
              {elt}
            </div>
          );
        })}

        <button onClick={() => this.add()}>Add a value</button>
      </div>
    );
  }
}

export default Boxes;