Question

我有一个简单的单选按钮组组件on codepen here，它不会在codepen中呈现。我想将此发布到代码审查stackexchange，因为它是我构建的第一个组件之一，并且在我正在构建的Web应用程序的许多地方都是必需的。但是对于那篇文章，我希望我的codepen示例能够正常工作。

我想我可能打破了一些关于如何使用es6进行反应以使应用程序呈现的规则，但我正在努力调试。我的console.logs（）没有帮助，并且codepen中的错误消息也没有帮助。

由于我链接到我的codepen，我必须附带代码，所以这就是我目前在codepen中的内容：

＆＃13;

import React, { Component } from 'react';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';


class ToolButtonGroup extends Component {

    constructor(props) {
        super(props);
    };
  
    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 
              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>
        )
    }   
}



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() {

        console.log("A")
        // 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>
        )
    }
}


ReactDOM.render(
  <StarterApp />,
  document.getElementById('root')
);

＆＃13;

.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; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<div id='root'>
  COME ON WORK!
</div>

＆＃13;

我毫不奇怪地努力让这段代码片段正常工作。虽然在这种情况下，但是因为我不知道如何包含react-bootstrap，这是我和＃39已经在我的codepen中完成了。

谢谢！

Answer 1

我注意到在特定项目中使用import语句时出现错误。

这可能是对codepen上的转换引擎的限制。如果您使用已经解决了所有这些问题的平台（例如：enter link description here），那就更好了。

Here是您在codesandbox上的代码。

React组件不会在Codepen中呈现

1 个答案: