遍历 Bootstrap/Reactstrap 中的数组后结束按钮组中的空按钮

Question

我在按钮组的末尾生成了这个空按钮。不知道为什么并试图阻止它呈现不起作用。

这是使用 Bootstrap 和 Reactstrap。

这是最后什么都不显示的数组：

constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
        options: [
            5, 10, 15, 20, 25,
            30, 35, 40, 45, 50,
            'Mean',
            55, 60, 65, 70, 75,
            80, 85, 90, 95
        ]           
    }
}

这是迭代和渲染它的地方：

        <Popover placement='bottom' isOpen={popoverOpen} target={k} toggle={this.toggle}>
            <PopoverHeader>Select New Percentile</PopoverHeader>
            <PopoverBody>
                <ButtonGroup size='sm'>
                    {
                        _.map(options, o => {
                            if (o) {
                                return (<Button key={o}>{o}</Button>)                                            
                            }
                        })
                    }
                    <Button></Button>
                </ButtonGroup>
            </PopoverBody>
        </Popover>

Answer 1

我在您的地图代码中没有发现任何问题，但问题出在您在地图代码之后添加的空按钮

 <Button></Button>

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { 
          options: [
        5, 10, 15, 20, 25,
        30, 35, 40, 45, 50,
        'Mean',
        55, 60, 65, 70, 75,
        80, 85, 90, 95
      ],  };

  }

  render() {
    return (
      <div className="App">
        <h1>New Component </h1>
        {this.state.options.map((options, o) => {
          if (o) {
            return (<button key={o}>{o}</button>)
          }
        }
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>

    <Popover placement='bottom' isOpen={popoverOpen} target={k} toggle={this.toggle}>
        <PopoverHeader>Select New Percentile</PopoverHeader>
        <PopoverBody>
            <ButtonGroup size='sm'>
                {
                    _.map(options, o => {
                        if (o) {
                            return (<Button key={o}>{o}</Button>)                                            
                        }
                    })
                }
                <Button></Button> //delete this
            </ButtonGroup>
        </PopoverBody>
    </Popover>

遍历 Bootstrap/Reactstrap 中的数组后结束按钮组中的空按钮

Empty button at end button group after iterating through array in Bootstrap/Reactstrap

twitter-bootstrap

reactjs

bootstrap-4

reactstrap