Question

我有一个父组件，其中下面的组件在 map 函数中动态生成，如下所示：

const renderListing = this.props.listing.map(function(list, index) {
        return (
          <Listing
            key={index}
            title={list.title}
            totalWorkers={list.totalWorkers}
          />
        );
      }, this);

在此<Listing />组件中，我有一个来自react-md的复选框，如下所示：

import { Checkbox } from "react-md";
class Listing extends React.Component {
  render() {
    return (
<Checkbox id="`listSector-${this.props.key}`" name="list-sector" />
   );
  }
}

我想提供名为key与id="listSector-0" , id="listSector-1"连接的道具，依此类推。

我尝试了字符串文字，但都完成了。

有人知道如何将动态this.props.key与id的{{1}}联系起来吗？

由于

Answer 1

'key'和'ref'是不允许作为道具传递的保留字。你可以传递另一个具有相同值的道具

const renderListing = this.props.listing.map(function(list, index) {
    return (
      <Listing
        key={index}
        keyId={index}
        title={list.title}
        totalWorkers={list.totalWorkers}
      />
    );
  }, this);

并像

一样使用它

<Checkbox id="`listSector-${this.props.keyId}`" name="list-sector" />

Answer 2

JSX元素上的大多数道具都会传递给组件，但是，React使用了两个特殊的道具（ref和key），因此它们不会转发给组件。

Special Props Warning – React

key在ReactJs的Child组件中不能作为prop使用

2 个答案: