如何动态地在 React JSX 元素上设置属性？

Question

我想在 React 元素上动态设置 key 属性，如下所示。然而，这两种方法都不起作用。我知道我可以为此使用其他技术，但我想知道是否可以这样做：

一个：

{
    new Array(3).fill(<td></td>).map((td,i) => {
        td.setAttribute('key', i);
        return td;
    })
}

两个：

{
    new Array(3).fill(document.createElement(td)).map((td,i) => {
        td.setAttribute('key', i);
        return td;
    })
}

错误

// td is {$$typeof: Symbol(react.element), type: "td", key: null, ref: null, props: {…}, …}
// Uncaught (in promise) TypeError: td.setAttribute is not a function

Answer 1

两者都将 same td 元素放入数组中三次。绝对不是你想做的。您想要创建三个 td。您可以通过填充 null 然后映射元素来做到这一点：

{
    Array(3).fill(null).map((_, i) => <td key={i}></td>)
}

或使用Array.from的回调：

{
  Array.from(Array(3), (_, i) => <td key={i}></td>)
}

实例：

const Row = () =>
  <tr>
    {
      Array.from(Array(3), (_, i) => <td key={i}>TD #{i}</td>)
    }
  </tr>
;

ReactDOM.render(
  <table>
    <tbody>
      <Row />
    </tbody>
  </table>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如何动态地在 React JSX 元素上设置属性？

How to setAttribute on React JSX element dynamically?

javascript

reactjs

iteration

jsx

setattribute