javascript - React - 我放置在 css 网格上的简单单选按钮组件存在问题

Question

我正在构建我的第一个 React 应用程序，我的应用程序的一个重要组件是一组美观的单选按钮，它将在我的大多数应用程序页面上使用，其值用于过滤我正在绘制的数据.为了让组件更容易制作，我决定使用 react-bootstrap 的 ToggleButton 和 ToggleButtonGroup 组件，然后创建我的展示组件 ToolButtonGroup 作为 react-bootstrap 组件的包装器。

目前我对 ToolButtonGroup.js 的了解:

import React, {Component} from 'react';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';

class ToolButtonGroup extends Component {

    constructor(props) {
        super(props);
    }

    handleChartTypeChange = (e) => {
        this.props.handler();
    }

    render() {

        // Get Variables from the params prop
        const { header, buttons, initialVal } = this.props.params;
        const { borderRadius, margin, padding, fontsize, border } = this.props.params;
        const { gridID, gridColumns, minRowHeight } = this.props.params;

        // Create the individual buttons
        const pageButtons = buttons.map((buttoninfo, idx) => {
            return (
                <ToggleButton 
                    key={idx}
                    style={{
                        "borderRadius": borderRadius, 
                        "margin": margin,
                        "padding": padding,
                        "fontSize": fontsize,
                        "border": border
                    }}
                    bsSize="large"
                    value={buttoninfo.value}>
                {buttoninfo.label}
                </ToggleButton>
            )
        })

        // Return the button group
        return(
            <div className="buttons-container"
                 style={{"border": "1px solid red";}}
                 id={gridID}>
                <h2 style={{
                  "width": "100%";
                  "margin": "0 auto";
                  "fontSize": "1.75em";
                  "marginTop": "5px";   
                  "border": "none";
                }}
                >{header}</h2>
                <ToggleButtonGroup 
                    type="radio"
                    name="charttype-options" 
                    defaultValue={initialVal} 
                    onChange={this.props.handler}
                    style={{
                        "display": "grid",
                        "gridTemplateColumns": "repeat(" + gridColumns + ", 1fr)",
                        "gridAutoRows": "auto",
                        "gridGap": "8px"
                    }}
                >
                    {pageButtons}
                </ToggleButtonGroup>
            </div>
        )
    }   
}

export default ToolButtonGroup;

我使用传递给此组件的参数在 ToggleButtonGroup 中制作了 ToggleButtons 的 css 网格。按钮的数据/初始值、大部分样式以及网格数据都作为 props 来自父组件。

(我实际上不确定使用 react-bootstrap 组件是否让我自己更容易或更难制作此组件...)

最后，为了演示调用 ToolButtonGroup，我有一个容器组件 starterContainer.js，它创建两个工具按钮组:

import React, {Component} from 'react';
import ToolButtonGroup from 'ToolButtonGroup';

// Import CSS for this App
import './starterContainer.css';

class StarterApp extends Component {
    constructor(props){
        super(props);
        this.state = {
            pitchersOrHitters: "",
            position: ""
        }
    }

    // Button and Select Handlers!
    handlePitchHitChange = (pitchersOrHitters) => {
        this.setState({pitchersOrHitters})
    }
    handlePositionChange = (position) => {
        this.setState({ position: position });
    }

    render() {

        // 0. Load State and Props 
        const { pitchersOrHitters, position } = this.state;


        // Pitcher or Hitter Radio Button Group params
        const pitchOrHitButtonGroup = {
            borderRadius: "25px",
            margin: "1% 10%",
            padding: "5%",
            fontsize: "2em",
            border: "2px solid #BBB",

            gridColumns: 1, minRowHeight: "10px", "gridID": "buttons1",

            header: "Choose One:",          
            buttons: [
                { value: "Pitchers", label: "Pitchers" },
                { value: "Hitters", label: "Hitters" },
            ],
            initialVal: "Pitchers"}

        // Pitcher or Hitter Radio Button Group params
        const positionButtonGroup = {
            borderRadius: "10px",
            margin: "1% 10%",
            padding: "5%",
            fontsize: "1.25em",
            border: "2px solid #BBB",

            gridColumns: 4, minRowHeight: "20px", "gridID": "buttons2",

            header: "Choose One:",          
            buttons: [
                { value: "SP", label: "SP" },
                { value: "RP", label: "RP" },
                { value: "1B", label: "1B" },
                { value: "2B", label: "2B" },
                { value: "SS", label: "SS" },
                { value: "3B", label: "3B" },
                { value: "LF", label: "LF" },
                { value: "RF", label: "RF" },
                { value: "CF", label: "CF" }
            ],
            initialVal: "SP"}


        return(
            <div className="chart-grid-container">
                <ToolButtonGroup
                    params={pitchOrHitButtonGroup}
                    value={pitchersOrHitters}
                    handler={this.handlePitchHitChange} />    

                <ToolButtonGroup
                    params={positionButtonGroup}
                    value={position}
                    handler={this.handlePositionChange} />    
            </div>
        )
    }
}

唯一增加的是用于布局按钮组和其他组件的 css 网格。这个 staterContainer 的网格在这里也有许多其他组件，包括 Select 小部件和其他小部件组件，以及绘制 D3 图形本身的组件。起初，这个 starterComponent css grid 似乎没有用，但它对我以后的页面很有帮助，我想保留它。

starterComponent.css

.chart-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    grid-gap: 5px;
    grid-template-areas:
        "btns1 btns1 btns2 btns2 btns2 btns2 . . . . . .";
}

#buttons1 { grid-area: btns1; }     
#buttons2 { grid-area: btns2; }     

有了这个，我有几个问题/问题:

<强>1。错误: 当我的组件最初加载时，ToggleButtons 悬卡在 CSS 网格的父容器中指定的边框之外。但是，当我单击任何按钮时，ToggleButtons 会调整大小以适应网格容器的内部。我认为这是由于两个组件之间的一些格式错误传达而发生的，但我不确定如何解决这个问题。

1. 我的 handleChartTypeChange 函数没有执行任何操作，因为我将 this.props.handler 直接传递给 ToggleButtonGroup。我可以摆脱 handlechartTypeChange 吗？还是我应该继续使用它？

2. 我的 starterContainer 有 2 个句柄更改函数...有没有一种简单的方法可以将其变成 1 个句柄更改函数？这似乎是重复的，而且我在一个页面上也可能有 2 个以上的按钮组。

3. 一般来说，作为将在我的大多数应用程序中使用并且具有重要功能的组件，我想确保我正确地创建了它。是否有任何令人震惊的 React 原则/CSS 格式化方法

4. 我将初始值传递给我的按钮组 两次 - 一次是在传递给 ToolButtonGroup 组件的参数中，一次也是在 starterComponent 中作为初始状态。我怎样才能删除这个重复项？

感谢任何帮助 - 这对我来说是一个重要的组成部分，可以让我正确地使用我正在创建的图形工具的 Web 应用程序。如果它的功能无法正常工作，我肯定会在其他地方遇到问题。

Answer 1

您的大部分问题可能更多关于 codereview.stack，但我对此有一些想法。

1.还不是网格主控，但网格的直接子元素(类为“chart-grid-container”的容器元素)是类为“buttons-container”的元素。马上你就会想知道如果在那个 css 类下定义了任何东西会怎样。第二个观察，看一眼 at this doc page ，是你错过了 grid-area 规则，我想知道“gridID” Prop 是否与那个相匹配。

2。如果您希望稍后将额外的本地逻辑添加到该处理程序，是的，请保留它。否则你不需要它。

3。为了清楚起见，我实际上喜欢每个都有自己的离散命名处理程序。另一方面，如果有一大堆这些组件和重复逻辑，我可能会使用带有 thunk 的 es6 对象的动态属性名称，例如:

    // pseudo code!
    handleChange = (key_name) => {
      return (new_value) =>
        this.setState({
          [key_name]: new_value
        })
    }

   // later ...
   handler={this.handleChange('position')} />    

4.对于您的 ToolButtonGroup 组件，如果它不携带自己的本地状态，您应该只使用 make it a function 以防不需要构造函数和处理程序包装器(如上所述)

第二个观察，是否有必要将 props 全部传递到另一个命名空间(“params”)下？它似乎没有任何作用。我确实认为您在自己的对象中为每个组件实例指定 props 很巧妙，但我接下来要做的只是将它们传播到 JSX 中，然后直接从 this.props as outlined here 引用它们。

           <ToolButtonGroup
                {...positionButtonGroupProps}
                handler={this.handleChange('position')} />

5.我对这个问题有点不清楚，因为我实际上没有发现 ToolButtonGroup 中引用了 value Prop ？也许我掩盖了它。无论如何，我只是将它附加到 props 对象，如上所述