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

- Green

Answer 1

这两种方法都会将 相同的 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>

- T.J. Crowder