Question

我正在尝试使用array.map（）来填充带有按钮的ButtonGroup，但按钮没有显示出来。我用完全相同的方法用MenuItems填充DropdownButton没问题。

工作DropdownButton在这里：

<DropdownButton title={this.state.regionallevel} onSelect={(evt)=>{
                this.setState({regionallevel: evt}, () => {
                    this.sendNewScenarios();
                })}}>
                {regionalLevels.map((regionalleveli, i) =>
                    <MenuItem eventKey={regionalleveli} key={i}>{regionalleveli}</MenuItem>)}
            </DropdownButton>

这是非工作的ButtonGroup：

<ButtonGroup vertical>
                {scenarios.map=((scenarioi, i) =>
                    <Button color="default" key={i} onClick={() => this.onCheckboxBtnClick(scenarioi)} active={this.state.checkboxesSelected.includes(scenarioi)}>{scenarioi}</Button>)}
            </ButtonGroup>

如果我这样做，ButtonGroup会起作用，但我需要它是动态的：

<ButtonGroup vertical>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[0])} active={this.state.checkboxesSelected.includes(scenarios[0])}>{scenarios[0]}</Button>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[1])} active={this.state.checkboxesSelected.includes(scenarios[1])}>{scenarios[1]}</Button>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[2])} active={this.state.checkboxesSelected.includes(scenarios[2])}>{scenarios[2]}</Button>
            </ButtonGroup>

组件从react-bootstrap导入。问题出在哪里？

更新：好的，我不知道为什么，但是现在ButtonGroup正常工作，即使我根本没有更改代码。但是另一个ButtonGroup应该以相同的方式工作，但不是。这是代码：

<ButtonGroup vertical>
                {periods.map=((periodi, i) =>
                    <Button color="default" key={i} onClick={() => this.onRadioBtnClick(periodi)} active={this.state.radioButtonSelected===periodi}>{periodi}</Button>)}
            </ButtonGroup>

以下是控制台显示的内容。第95行是上面的ButtonGroup开始的地方：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in div (created by ButtonGroup)
in ButtonGroup (at DropdownMenuScenarios.js:95)
in div (at DropdownMenuScenarios.js:56)
in DropdownMenuScenarios (at App.js:36)
in div (at App.js:29)
in App (at index.js:7)

Answer 1

你有一个拼写错误（额外的=）。所以：

 periods.map((periodi, i) => ....

而不是

 periods.map=((periodi, i) => ...

这就是错误明确的原因：Functions are not valid as a React child.

使用数组使用按钮完成填充ButtonGroup

1 个答案: