键在ReactJs的Child组件中不可用作prop [英] key is not available as prop in the Child component in ReactJs

问题描述

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

I have a parent component in which below component is producing dynamically in map function as below:

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

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

In this <Listing /> component, I have a Checkbox from react-md as below:

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"串联的道具.

I wanted to give the props named key concatenated with id="listSector-0" , id="listSector-1" and so on.

我尝试过字符串文字，但全部无效.

I have tried string-literals but all invain.

谁能知道如何赋予与checkbox的id串联的动态this.props.key吗?

Can anyone know that how to give dynamic this.props.key concatenated with id of the checkbox ?

谢谢

推荐答案

'key'和'ref'是保留字，不允许将其作为道具传递.您可以传递另一个具有相同值的道具

'key' and 'ref' are reserved words that are not allowed to be passed as props. You can pass another prop with the same value

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" />

这篇关于键在ReactJs的Child组件中不可用作prop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！