Как создать массив кнопок внутри цикла

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

код:

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

var arrButtons = [];
var buttonStyle = {
    margin: '10px 10px 10px 0'
};

class ButtonClicks extends React.Component {
    constructor(props) {
        super(props);
        this.onClickFunction = this.onClickFunction.bind(this);
    }
    onClickFunction() {
      console.info("hello world from button: " + i);
    };

    render() {
        return (
            for (let i = 0; i < 10; i++) {
                var button = <button
                    style = {buttonStyle}
                    onClick = {onClickFunction}>
                    p.name
                </button>
                arrButtons.push(button);
            }
        );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);
export default ButtonClicks;

ошибка

/src/index.js: Unexpected token (21:4)

Вы бы публиковали сообщения об ошибках?

— 31.07.2018 15:36

Подождите, тег этого сообщения - react-native, но код, о котором идет речь, - react-dom. Возможно, захочется отредактировать это.

— 31.07.2018 15:51

В любом случае, проверьте мой ответ. Ваш подход уже правильный, но render принимает только 1 элемент. Итак, я переместил петлю for и поместил кнопки внутрь div.

— 31.07.2018 16:09

javascript reactjs

31.07.2018 15:32

Поведение ключевого слова "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 645

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

Ответы 1

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

Ваш подход правильный. НО! render React принимает только 1 элемент (у какого дочернего элемента может быть столько элементов, сколько вам нужно). Итак, вам нужно обернуть эти кнопки внутри div. Это почти единственное изменение, которое я сделал, кроме перемещения вашего лупа for за пределы return.

var arrButtons = [];
var buttonStyle = {
    margin: '10px 10px 10px 0'
};

class ButtonClicks extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  
  onClick() {
    console.info("hello world");
  }

  render() {
    for (let i = 0; i < 10; i++) { //Moved your loop outside render()'s return
      arrButtons.push(<button style = {buttonStyle} onClick = {this.onClick}>{i}</button>)
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

ReactDOM.render( <ButtonClicks/> , document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

спасибо, я хотел бы передать индекс i в onClickFunction, чтобы при нажатии кнопки 3 я получал: hello world от кнопки 3 .... не могли бы вы помочь мне сделать это

— 31.07.2018 17:20

onClick = {() => this.onClick(i)}

— 31.07.2018 18:53

31.07.2018 15:58