时间戳

首页 > 解决方案 > 我正在尝试在 React.js 中制作一个按钮矩阵

reactjs - 我正在尝试在 React.js 中制作一个按钮矩阵

问题描述

我正在尝试制作一个左侧按钮矩阵以及右侧按钮的反应。当我去渲染它不会渲染。我得到一个匿名函数，但我不知道匿名函数是什么。我尝试使用 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);

标签： reactjsmultiple-columns

解决方案

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要：

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

以您拥有的方式使用它绝对没有错。这就是“匿名”功能的含义。

推荐阅读