键在 ReactJs 的子组件中不能作为道具使用

Posted 2023-02-21

【中文标题】键在 ReactJs 的子组件中不能作为道具使用

【英文标题】：key is not available as prop in the Child component in ReactJs

【发布时间】：2018-05-21 04:06:19

【问题描述】：

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

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 的 props 与 id="listSector-0" , id="listSector-1" 连接起来等等。

我尝试过字符串文字，但都是徒劳的。

谁能知道如何将动态this.props.key 与id 的id 连接起来？

谢谢

【参考方案1】：

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

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

【讨论】：

你能澄清一下为什么 key 没有作为道具传递吗？这似乎是一个任意的限制。 （我已经打开了issue 试图对此进行澄清。）

@mindplay.dk，为什么 key 不作为道具传递是因为它被内部反应用来优化重新渲染。现在想象一个 key 作为 prop 传递的情况，并且您尝试更改 key 的值，并且在子组件 componentDidUpdate 或 useEffect 挂钩（取决于您使用基于类还是基于组件的方法）中，您尝试采取和行动只意识到组件不是重新渲染而是重新安装会让你感到困惑。并且通过对不使用名称作为键施加小的限制来避免将用户与此类行为混淆

【参考方案2】：

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

Special Props Warning – React