动态渲染多个按钮

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){&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; Button {props.value} has been pressed!&nbsp;&nbsp; &nbsp; &nbsp; <button>back</button>&nbsp; &nbsp; </div>&nbsp; )};class App extends Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; buttonPressed: 0,&nbsp; &nbsp; &nbsp; buttonCount: [1,2,3,4,5]&nbsp; &nbsp; }&nbsp; }&nbsp; handleClick = (event) => {&nbsp; &nbsp; this.setState({ buttonPressed: event.target.id });&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; render() {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {this.state.buttonCount.length > 0 ? this.state.buttonCount.map((item,index) => (&nbsp; &nbsp; &nbsp; &nbsp; <button id={item} key = {index} onClick={()=>this.handleClick} className={`button${item}`}>&nbsp; &nbsp; &nbsp; &nbsp; {item}&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; : null&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}// RenderReactDOM.render(&nbsp; <App />,&nbsp; document.getElementById("react"));.button1 {&nbsp; background-color: green;}.button2 {&nbsp; background-color: blue;}.button3 {&nbsp; background-color: red;}.button4 {&nbsp; background-color: yellow;}.button5 {&nbsp; 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>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Answer 2

您可以拥有数组类型的状态变量：this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttonPressed: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; burronArray:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id : 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name : "Button 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id : 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name : "Button 2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }并在渲染函数中：render() {&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.buttonArray.length > 0 ? buttonArray.map((button, index) => return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value = {button.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;className='button1'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onClick={() => this.handleClick(1)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;> {button.name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }