Я пытаюсь сделать матрицу кнопок в React.js

Question

Я пытаюсь сделать матрицу кнопок влево и реагировать на действия кнопок справа. Когда я иду, чтобы сделать это не будет делать. Я получаю анонимную функцию, и я не знаю, что такое анонимная функция. Я попытался использовать зависимость столбца от NPM. Я не знаю, как использовать эту зависимость, есть ли более простой способ сделать это и очистить мой код?

import React from "react";
import ReactDOM from "react-dom";
import { ButtonThemes, ButtonTypes, ButtonSizes } from "./buttonTypes";
import { IconTypes } from "./iconTypes";
import Button from "./Button";
import "./styles.css";


**var Columns = require('react-columns');

function Component(){
  var queries = [{
    columns: 2,
    query: 'min-width: 500px'
    }, {
    columns: 3,
    query: 'min-width: 1000px'
  }];

  function App() {
    return (
       <React.Fragment>
          <div className="App">
             <Columns queries={queries}>
               <Button
                 size={ButtonSizes.MEDIUM}
                 label="Button"
                 onClickHandler={() => alert("you clicked!")}
                 type={ButtonTypes.PRIMARY}
               />
               <p>
                 this is a button
               <p>
             </Columns>
          </div>
       </React.Fragment>
     );
   }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, <Columns />, rootElement);

Answer 1

Вызов ReactDOM.render недействителен. См. Документы по render. Удалите компонент Columns.

Подпись: ReactDOM.render(element, container[, callback]).

Ваш звонок должен быть: ReactDOM.render(<App/>,rootElement).

Изменить импорт на:

import React from "react";
import ReactDOM from "react-dom";
import { ButtonThemes, ButtonTypes, ButtonSizes } from "./buttonTypes";
import { IconTypes } from "./iconTypes";
import Button from "./Button";
import Columns from 'react-columns';

И ваш render to:

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

Похоже, вам не нужны ни Component, ни App. Сократите это до:

function App(){
  var queries = [{
    columns: 2,
    query: 'min-width: 500px'
    }, {
    columns: 3,
    query: 'min-width: 1000px'
  }];

  return (
    <React.Fragment>
      <div className="App">
        <Columns queries={queries}>
          <Button
            size={ButtonSizes.MEDIUM}
            label="Button"
            onClickHandler={() => alert("you clicked!")}
            type={ButtonTypes.PRIMARY}
          />
          <p>
            this is a button
          <p>
        </Columns>
      </div>
    </React.Fragment>
  );
}

Чтобы ответить на другой вопрос, анонимная функция - это функция без имени. Примером является ваш onClickHandler onClickHandler={() => alert("you clicked!"). Вы дали ему встроенную функцию, которая нигде не хранится, но повторно объявляется при каждом рендеринге.

Обычная функция:

onClickHandler () => {
  alert('you clicked')
}

...
<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  onClickHandler={onClickHandler}
  type={ButtonTypes.PRIMARY}
/>

где, как у вас, в анонимном:

<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
/>

Нет ничего плохого в том, чтобы использовать его так, как он есть у вас. Вот что означает «анонимная» функция.

Answer 2

Чтобы очистить код, вы можете создать статический JSON, который содержит информацию о кнопках, в вашем случае ID, метку, размер и тип.

После этого вы можете включить это JSON в вашем файле .js или .jsx визуализируйте данные json в цикле.

Например,

buttons_json.js

import { ButtonThemes, ButtonTypes, ButtonSizes } from "./buttonTypes";

export const BUTTON_JSON = [
{
    'id': 1,
    'label': 'Button 1',
    'size': ButtonSizes.MEDIUM,
    'type': ButtonTypes.PRIMARY,
    'disabled': true
},
{
    'id': 2,
    'label': 'Button 2',
    'size': ButtonSizes.MEDIUM,
    'type': ButtonTypes.PRIMARY,
    'disabled': false
},
{
    'id': 3,
    'label': 'Button 3',
    'size': ButtonSizes.SMALL,
    'type': ButtonTypes.SECONDARY,
    'disabled': false
},
{
    'id': 4,
    'label': 'Button 4',
    'size': ButtonSizes.LARGE,
    'type': ButtonTypes.TERTIARY,
    'disabled': true
}];

App.js

import React from "react";
import ReactDOM from "react-dom";
import { IconTypes } from "./iconTypes";
import Button from "./Button";

import {BUTTON_JSON} from './buttons_json'; 


function render_buttons() {
return(
    <div className="App">
        {
            BUTTON_JSON.map((ins) => {
                return(
                    <Button
                        size={ins.size}
                        label={ins.label}
                        onClickHandler={() => alert("you clicked!")}
                        type={ins.type}
                        disabled={ins.disabled}
                    />
                )
            })
        }
    </div>
)
}

function App() {
return(
    <React.Fragment>
        {
            render_buttons()
        }
    </React.Fragment>
)
}

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