Question

在我的react应用程序中，我为

创建了一个组件。如下。

import React from 'react';
import PropTypes from 'prop-types';

const ListItem = props => {
   const { className, key, children } = props; 

   return (
      <li key={key} className={className}>
         {children}
      </li>
   );
}

ListItem.propTypes = { 
   className: PropTypes.string,
   key: PropTypes.string
}

export default ListItem;

当我尝试以此方式使用时，

<ListItem key={index} className="list-group-item">{skill}</ListItem>

它给出以下错误。 ListItem：key不是道具。尝试访问它会导致返回undefined。

我在这里做什么错了？

Answer 1

键在React中有特殊含义，通常无法通过this.props使用。另请参阅docs

只有动态子代才需要键，您可以在其中执行以下操作：

const listItems = list ? (
  list.map((item, i) => (
    <li key={i} className="b-list__item">
      {item.keyword}
    </li>
  ))
) : null;

将密钥作为<li>道具传递

1 个答案: