将元素添加到现有的 React DropdownButton

Question

我正在使用 react 和 react-boostrap。

我创建了一个下拉按钮，在呈现时内部没有 Dropdown.Item 元素。调用 useEffect 时，我试图将来自服务器的结果附加到下拉按钮中。

我的HTML如下：

<Container className="mt-3">
  <InputGroup>
    <DropdownButton as={InputGroup.Prepend} title="Existing Label" id="input-group-dropdown-1">
      <Dropdown.Item></Dropdown.Item>
    </DropdownButton>
    <FormControl id="nameForm" placeholder="Name of person" />
    <FormControl id="labelForm" placeholder="Label: Criminal or Citizen" />
  </InputGroup>
</Container>

我添加元素的代码如下：

    var dropdownItem = document.createElement("Dropdown.Item");
    dropdownItem.value = jsonArray[i];
    var splitString = jsonArray[i].split("-");
    var formNameText = splitString[0].replace(' ', '');
    var formLabelText = splitString[1].replace(' ', '');
    dropdownItem.onClick = "{changeFormText(formNameText, formLabelText)}"
    document.getElementById('input-group-dropdown-1').append(dropdownItem)

我的问题是，没有元素最终出现在 DropdownButton 标记内。我试过使用 innerHTML，但它似乎覆盖了父按钮的文本字段。

我可能对 React 的基本要素有误解，但未能通过 google 找到解决方案。

Answer 1

您可以根据 jsx 中的模型追加元素。

const Component = ({items}) => {
   return (
   <Container className="mt-3">
    <InputGroup>
      <DropdownButton as={InputGroup.Prepend} title="Existing Label" id="input-group-dropdown-1">
        {
           items.map((name, index) => (<DropdownButton.Item key={index}>{name}</DropdownButton.Item>))
        }
      </DropdownButton>
      <FormControl id="nameForm" placeholder="Name of person" />
      <FormControl id="labelForm" placeholder="Label: Criminal or Citizen" />
    </InputGroup>
  </Container>
   )
}

假设 items 是要添加到下拉列表的字符串数组

Answer 2

根据您的评论，您的响应是一个数组，您可以将该数组设置为任何状态

如果您使用的是功能组件，那么请执行以下操作

const [dropdown,setDropdown] = React.useState([]);

// Inside your useEffect  you can do something like this

useEffect(()=>{
// After your server response
setDropdown(response);
},[])

// Then your jsx will be like this

    <DropdownButton as={InputGroup.Prepend} title="Existing Label" id="input-group-dropdown-1">
      {dropdown.map((item,i)=><Dropdown.Item key={i}>{item}</Dropdown.Item>)}
    </DropdownButton>

这只会在您的服务器响应后显示数据，希望对您有所帮助

将元素添加到现有的 React DropdownButton

Add elements to existing React DropdownButton

javascript

react-bootstrap