ReactJS：如何在 <DropDownMenu/> 内动态渲染 Material-UI 的 <MenuItem/>？

Question

使用 ReactJS + Material-UI，我有一个名为 colors 的数组，其中包含不同颜色的字符串。例如，数组colors 有 3 个颜色字符串：“白色”、“蓝色”、“绿色”。然后我想渲染每个颜色字符串在 <DropDownMenu/> （http://www.material-ui.com/#/components/dropdown-menu）内有一个 <MenuItem/>。和一旦选择了<MenuItem/>，我想控制台记录那种特定的颜色，比如选择“白色”：console.log(“白色”)。

所以我使用了 .forEach 但它没有显示任何字符串并且它是空的。我可能做错了什么？

代码如下：

  constructor() {
    super()

    this.state = {
      value: 1,
    }
  }

  dropDownColorChange(event, index, value) {
    this.setState({value: value})
    //Not sure how to implement here dynamically based on array size. Would like to console.log the color string of the selected
  }

  render() {
    var colors = ["white", "blue", "green"] //would be able to handle any array size


    return (
             <div>
               <DropDownMenu
                value={this.state.valueTwo}
                onChange={this.dropDownColorChange}
              >
                {
                    <MenuItem value={1} primaryText="Select" />
                  colors.forEach(color => {
                    <MenuItem primaryText={color}/>
                  })
                }
              </DropDownMenu>
             </div>
    )
  }

谢谢

Answer 1

你几乎做对了。您必须在可用颜色上map 并为每种颜色返回一个MenuItem：

const colors = ['white', 'blue', 'green'];

class ColorChanger extends Component {
  constructor() {
    super();

    this.state = {
      selectedColorValue: 1,
    };
  }

  handleColorChange(event, index, value) {
    console.log(`You have selected ${colors[value]} color`);

    this.setState({
      selectedColorValue: value
    });
  }

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.selectedColorValue} onChange={this.handleColorChange}>
          {colors.map((color, index) =>
            <MenuItem key={index} value={index} primaryText={color} />
          )}
        </DropDownMenu>
      </div>
    );
  }
}

map（与forEach相反）返回一个数组，其中每个元素都是谓词函数的返回值。在您的情况下，它返回 <MenuItem />。