如何在另一个 jsx 页面中使用带有无序列表的 React 组件？

Question

我有一个带有这样地图的自定义组件

const NewComponent = ({ headline, logos}) => {
  return (
<div>
  <h2>{headline}</h2>
  <ul>
    {logos.map(item => {
      return (
        <li>
          <a href={item.link}>
            <img src={item.image} alt="" />
          </a>
        </li>
      );
    })}
  </ul>
</div>
)
})};

我在这样的 jsx 页面中调用这个组件，这会引发错误。

<NewComponent
  headline={a.heading}
  logos={a.image, a.link}
/>

我想知道在我的 jsx 中使用上述组件的正确方法。

Answer 1

您以错误的方式传递logos ，它应该是一个数组，例如：

<NewComponent
  headline={a.heading}
  logos={[{image: a.image, link: a.link]}
/>

因为您正在传递一个Object所以它会出错，因为您不能在其上使用.map