动态渲染多个按钮

Question

我是 React Js 的新手，我想构建一个像链接一样的多个按钮。任何人都可以帮助我。理解语句和组件将非常有帮助。http://noxious-ornament.surge.sh/我尝试写这样的东西，但我不知道如何继续。import React, { Component } from 'react'import './Ar.css';class Ar extends Component {    constructor() {        super();        this.state = {            buttonPressed: 0            // 0 could be your default view        }    }    handleClick = (button) => {        this.setState({ buttonPressed: button })    }    render() {        return(            <div>            <button                  className='button1'                  onClick={() => this.handleClick(1)}             > BUTTON 1             </button>                          <button                  className='button2'                  onClick={() => this.handleClick(1)}             > BUTTON 2             </button>             <button                  className='button2'                  onClick={() => this.handleClick(1)}             > BUTTON 3             </button>                }       </div>        )    }}export default Ar

Answer 1

这是一个开始。接下来我将添加react-router-dom，以便您可以加载该SomePage组件。

const {Component} = React;

function SomePage(props){

  return (

    <div>

      Button {props.value} has been pressed! 

      <button>back</button>

    </div>

  )

};

class App extends Component {

  constructor() {

    super();

    this.state = {

      buttonPressed: 0,

      buttonCount: [1,2,3,4,5]

    }

  }

  handleClick = (event) => {

    this.setState({ buttonPressed: event.target.id });

    

  }

  render() {

    return(

      <div>

      {this.state.buttonCount.length > 0 ? this.state.buttonCount.map((item,index) => (

        <button id={item} key = {index} onClick={()=>this.handleClick} className={`button${item}`}>

        {item}

        </button>

      ))

      : null

      }

                  

      </div>

        )

    }

}

// Render

ReactDOM.render(

  <App />,

  document.getElementById("react")

);

.button1 {

  background-color: green;

}

.button2 {

  background-color: blue;

}

.button3 {

  background-color: red;

}

.button4 {

  background-color: yellow;

}

.button5 {

  background-color: purple;

}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

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

Answer 2

您可以拥有数组类型的状态变量：

this.state = {

            buttonPressed: 0,

            burronArray:[

               {

                 id : 1,

                 name : "Button 1"

               },

               {

                 id : 2,

                 name : "Button 2"

               },

            ]

        }

并在渲染函数中：

render() {

        return(

            <div>

             {this.state.buttonArray.length > 0 ? buttonArray.map((button, index) => return(

              <button 

                 key={index}

                 value = {button.id}

                 className='button1' 

                 onClick={() => this.handleClick(1)}

             > {button.name}

             </button>

             )) : null}

           </div>

        )

    }