如何在 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];

  

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

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

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

foo()这里返回您要在 div 中发布的值。

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

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

Answer 3

您将使用 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>

    );

}