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

这两个元素都将相同的 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元素的属性？

1 个答案: