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调用无效。 See docs on 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要：

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"));

我正在尝试在React.js中制作按钮矩阵

2 个答案: