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

【问题标题】：How to setAttribute on React JSX element dynamically?如何动态地在 React JSX 元素上设置属性？
【发布时间】：2018-07-17 10:09:06
【问题描述】：

我想在 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

【问题讨论】：

标签： javascript reactjs iteration jsx setattribute

【解决方案1】：

它们都将 same td 元素放入数组中三次。绝对不是你想做的。你想创建三个 tds。您可以通过填写 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>

【讨论】：