从另一个组件传递道具

Question

我有点卡住了，因为我不明白传递道具最后的逻辑。

我有 2 个组件

这是我在下拉组件中的项目

const DropdownItem = (props) => {
    let companies = [
        {
            id: 1, name: "Tesla", owner: "Elon Musk"
        },
        {
            id: 2, name: "Space X", owner: "Also Elon"
        },
        {
            id: 3, name: "Some X", owner: "Also Kanye"
        },
    ]
    let dropdownElements = companies.map(c =>
        <DropdownItem id={c.id} name={c.name} owner={c.owner}/>
    );

    return (
        <div>
            <a href="#" className="menu-item">
                <span className="icon-button"></span>
                {companies[0].name}
            </a>
        </div>
    );
}

export default DropdownItem;

这是它自己的 DropdownMenu

const DropdownMenu = (props) => {
    return (

        <div className="dropdown">
            <DropdownItem />
            <DropdownItem />
            <DropdownItem />
        </div>
    );
}

export default DropdownMenu;

如您所见，我正在创建 3 个组件以在下拉菜单中展示它，但问题是它们没有响应。 所以在我的下拉列表中看起来像这样。

如何正确传递此{dropdownElements} ，因为当我尝试添加它而不是 3x <DropdownItem />时，我收到没有任何项目的空下拉列表。

我在哪里错过了传递道具的逻辑？

总的来说，我想用 Redux 管理 state，但目前我只是想了解为什么我做不到，有什么建议可以通过它可以响应的元素吗？

Answer 1

基本上，你从一开始就走错路了。 您需要通过 Array.map 迭代数据，并且在 map 方法内部在每个 map 迭代中返回您的组件。 这是您可以在您的案例中将道具传递给组件的唯一方法，也不要忘记为每个数据项定义关键属性。

const DropdownMenu = (props) => {
     let companies = [
        {
            id: 1, name: "Tesla", owner: "Elon Musk"
        },
        {
            id: 2, name: "Space X", owner: "Also Elon"
        },
        {
            id: 3, name: "Some X", owner: "Also Kanye"
        },
    ]
    return (
            <div className="dropdown">
                {companies.map((c) => (
                    <DropdownItem key={c.id} name={c.name} owner={c.owner} />
                ))}
            </div>
        );
}

export default DropdownMenu;

所以，在你的 DropdownItem 必须是这样的：

const DropdownItem = ({name, owner}) => <div>{name} {owner}</div>