Динамически отображать несколько кнопок

Я новичок в 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

Здравствуйте, добро пожаловать в stackoverflow! Взгляните на stackoverflow.com/help/how-to-ask Вам нужно включить некоторую работу/код, чтобы получить лучший ответ

— 11.12.2020 13:13

Отвечает ли это на ваш вопрос? ReactJS перебирает массив состояний с динамическим ключом со своими данными

— 11.12.2020 14:03

javascript reactjs button react-component react-state

11.12.2020 13:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 838

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
        )
    }

извините, но у меня ошибка, похоже, это не работает :( не могли бы вы прислать мне это как коды и или на jsfiddle

— 11.12.2020 13:52

11.12.2020 13:21

Ответ принят как подходящий

Это начало. Затем я бы добавил 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>

я понял, наконец, большое спасибо за вашу помощь

— 12.12.2020 09:12

11.12.2020 14:07