使用 JSX 渲染引导组件

Question

为清楚起见进行编辑：我无法弄清楚如何在 react 应用程序中使用 JSX 动态创建 Boostrap 组件。最终目标是在单击第一个按钮时在“newBtnSpace”div 中获取新按钮。我尝试过使用 show.hide 方法，但这些方法需要硬编码。尝试基于数组创建按钮。代码：

./components/newBSBtnSpaceFunc.js

    import React, { Component } from 'react'
    import { Button } from 'reactstrap'

    export default function NewBSBtnFunc() {
    let BtnArray = ["red", "blue", "green"].map((btn) => {
        return React.createElement(
            Button,
            {variant: 'primary'},
            'New Button',
            {id: "newBtn"},
             btn
            )   
           }

./components/BSBtn.js

     import React, { Component } from 'react'
     import { Button } from 'reactstrap'
     import NewBSBtnFunc from "./NewBSBtnFunc"


     export default class BSBtn extends Component {

     render() {
       return (
          <div>
            <Button onClick={NewBSBtnFunc}>Click Me</Button>
            <div id="newBtnSpace"></div>
          </div>
       )
      }

}

App.js

     import React from 'react';
     import 'bootstrap/dist/css/bootstrap.min.css';
     import BSBtn from "./components/BSBtn"


     function App() {
      return (
       <div>
        <BSBtn></BSBtn>
      </div>
     );
    }

   export default App;

github链接：https://github.com/mollygilbert389/testingBootstrapBtn

Answer 1

您可以通过在原始按钮的onClick 中将状态项（在本例中为showNewButton）设置为true 来有条件地显示新按钮。

    render() {
        return (
            <div>
                <Button onClick={() => this.setState({ showNewButton: true }))}>Click Me</Button>
                <div id="newBtnSpace">{ this.state.showNewButton && <Button variant="primary" id="newBtn">New Button</Button> }</div>
            </div>
        )
    }

PS 你已经成功解决了如何在 jsx 中创建 Bootstrap 按钮：

<Button onClick={NewBSBtnFunc}>Click Me</Button>

Answer 2

onClick 不期望返回值，因此返回新按钮不会做任何事情。

您组织事物的方式非常困难，因为您无法从函数返回任何内容，也无法从类外部修改状态。我建议将您的点击处理程序移动到组件中并使用 to 修改将显示第二个按钮的状态值。

这是我的建议：

import React, { Component } from 'react'
import { Button } from 'reactstrap'

export default class BSBtn extends Component {
  state = {show: false}

  handleClick = () => {
    this.setState({ show: !this.state.show })
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>Click Me</Button>
        <div id="newBtnSpace">
          {this.state.show ? 
            <Button variant="primary" id="newBtn">New Button</Button>
          : null}
         </div>
      </div>
    )
  }
}

更新后的问题的解决方案：

class BSBtn extends React.Component {
  state = {
    show: false,
    buttons: []
  }

  handleClick = () => {
    this.setState({ show: !this.state.show })
  }
  
  handleAdd = () => {
    this.setState({ buttons: [...this.state.buttons, (this.state.buttons.length + 1)] })
  }

  render() {
    return (
      <div>
        <h3>Option 1</h3>
        <button onClick={this.handleClick}>Click Me</button>
        <div id="newBtnSpace">
          {this.state.show ? [1,2,3].map((value) => (
            <div>
              <button>Button {value}</button>
            </div>
         ))
         : null}
         </div>
         <hr/>
         <div style={{ marginTop: '30px' }}>
          <h3>Option 2</h3>
          <button onClick={this.handleAdd}>Click Me</button>
          {this.state.buttons.map((value) => (
            <div>
              <button>Button {value}</button>
            </div>
         ))}
         </div>
      </div>
    )
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />