动态渲染多个按钮

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>
        )
    }