Question

让我说我下面有一个选项数组

options = [ { name: 'My profile' }, { name: 'Sign out' } ]

public selectOptions(showOptions: boolean) {
    this.setState({ showOptions: !showOptions })
    return options.map((option: any, index: number) => {
      return (
        <div
          key={index}
          option={option}>
          {option.name}
        <div/>
      )
    }
    )
  }

如何在不使用任何外部库的情况下简单地呈现下拉列表。上面的代码不呈现任何div

Answer 1

在React中，由基于类的组件完成的仅渲染是通过返回值render完成的。因此，您要做的只是在selectOptions中设置状态，然后在render中要么包含选项，要么不基于状态标志：

public selectOptions(showOptions: boolean) {
    this.setState({ showOptions });
    //              ^---- I removed the !, surely you should be using the flag as is?
}

public render() {
    const {showOptions} = this.state;
    return (
        <div>Any other stuff you're rendering...</div>

        {showOptions &&
            <div>
                {options.map((option: any, index: number) => {
                  return (
                    <div
                      key={index}
                      option={option}>
                      {option.name}
                    <div/>
                  )
                })}
            </div>
        }
    );
}

Answer 2

import React from 'react';

const Drop = () => {
    const options = [ { name: 'My profile' }, { name: 'Sign out' } ]
    return (
        <div><select>{
            options.map ( (opt) => {
                return (
                    <option>{opt.name}</option>
                )
        })}
        </select></div>
    )
}

export default Drop;

以上显示的是带有所需数据的下拉菜单。

渲染下拉菜单

2 个答案: