Рендеринг компонента Bootstrap с использованием JSX - PullRequest
Новая
       24

Рендеринг компонента Bootstrap с использованием JSX

0 голосов
/ 04 марта 2020

Редактирование для ясности: я не могу понять, как динамически создавать компоненты Boostrap, используя JSX в приложении реагирования. Конечная цель - получить новую кнопку в div «newBtnSpace» при нажатии первой кнопки. Я пытался использовать методы show.hide, но они должны быть жестко закодированы. Попытка создать кнопки на основе массива. код:

. / компоненты / newBSBtnSpaceFun c. 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
            )   
           }

. / компоненты / 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>
       )
      }

}

Приложение. 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

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

onClick не ожидает возвращаемого значения, поэтому возврат новой кнопки ничего не изменит.

То, как вы все организовали, усложняет задачу, поскольку вы ничего не можете вернуть из функции, и вы не можете изменить состояние вне класса. Я бы предложил переместить ваш обработчик кликов в компонент и использовать для изменения значения состояния, которое будет отображать вторую кнопку.

Вот мое предложение: 

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' />
0 голосов
/ 04 марта 2020

Вы можете условно показать новую кнопку, установив для элемента состояния (в данном случае showNewButton) значение true в onClick исходной кнопки. 

    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 у вас есть уже успешно отработано, как создавать Bootstrap кнопки в jsx: 

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