如何在 parent 的反应 bootstrap(Dropdown) 中设置道具

Question

我正在从 react-bootstrap 反应自定义下拉菜单以创建组件，但我无法检索道具。这是我在 index.js、src/components/Dropdown/index

中的代码

import React from 'react';
import {Dropdown} from 'react-bootstrap';
import '../Dropdown/index.css'

const DropdownItem = (name) => {
  return(
    <Dropdown>
      <Dropdown.Toggle className="dropdown-button">
        Selection
      </Dropdown.Toggle>

      <Dropdown.Menu className="dropdown-menu">
        <Dropdown.Item href="#/action-1">{name}</Dropdown.Item>
        <Dropdown.Item href="#/action-2">{name}</Dropdown.Item>
      </Dropdown.Menu>
  </Dropdown>
  );
}

export default DropdownItem;

我将从 app.js(src/app) 中呈现的名称像这样传递到下拉项中

< DropdownItem name="Milk Tea"/>

但是如果我有很多项目，我怎样才能将它们全部打印在一个下拉组中？

我不能这样做

< DropdownItem name="Milk Tea"/> 
< DropdownItem name="Fruit"/>

它将呈现许多下拉菜单而不是下拉项目

你的帮助很有用

Answer 1

你搞错了子组件逻辑。根据我看到的代码，您的子组件是整个 Dropdown 组件。因此，您将必须传递名称数组作为道具。

示例。

import React from "react";
import { Dropdown } from "react-bootstrap";
import "../Dropdown/index.css";

const DropdownItems = ({ nameList }) => {
  return (
    <Dropdown>
      <Dropdown.Toggle className="dropdown-button">Selection</Dropdown.Toggle>

      <Dropdown.Menu className="dropdown-menu">
        {nameList.map((name, index) => (
          <Dropdown.Item href={`#/action-${index}`}>{name}</Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

在App.js

<DropdownItems nameList={["Milk Tea","Fruit"]} />

如何在 parent 的反应 bootstrap(Dropdown) 中设置道具

How to set prop in react bootstrap(Dropdown) from parent

reactjs

react-bootstrap

react-props