使用 React 在 Codepen 上未呈现按钮答案

【问题标题】：Buttons not rendering on Codepen using React使用 React 在 Codepen 上未呈现按钮
【发布时间】：2020-02-03 07:47:51
【问题描述】：

我正在尝试使用 React 制作一个计算器，但我无法让渲染中的内容显示在页面上。它只显示“显示” div。

class Calculator extends React.Component{ 
  render(){
    return (  
        <div className="display">test</div>
    );
  }
}
ReactDOM.render(<Calculator />, document.getElementById("calculator"));

然后我添加了按钮，它停止显示

class Calculator extends React.Component{ 
  render(){
    return (  
        <div className="display"></div>
        <div className="numRow">
            <button id="one">1</button>
            <button id="two">2</button>
            <button id="three">3</button>
        </div>
        <div className="numRow">
            <button id="four">4</button>
            <button id="five">5</button>
            <button id="six">6</button>
        </div>
        <div className="numRow">
            <button id="seven">7</button>
            <button id="eight">8</button>
            <button id="nine">9</button>
        </div>
        <div className="opRow">
            <button id="add">+</button>
            <button id="subtract">-</button>
            <button id="multiply">*</button>
            <button id="divide">/</button>
        </div>
        <div className="etcRow">
            <button id="clear">Clear</button>
            <button id="decimal">.</button>
            <button id="equals">=</button>
        </div>
  ); 
}}

ReactDOM.render(<Calculator />, document.getElementById("calculator"));

我添加了 React、ReactDOM 和 Babel。 https://codepen.io/hanuruh/pen/dyPxRNX

【问题讨论】：

你可以在这里查看我的答案：stackoverflow.com/a/59923480/4386148
这能回答你的问题吗？ Why Hello World is not showing up?

标签： javascript reactjs codepen

【解决方案1】：

class Calculator extends React.Component{ 
  render(){
    return (  
      <>
        <div className="display"></div>
        <div className="numRow">
            <button id="one">1</button>
            <button id="two">2</button>
            <button id="three">3</button>
        </div>
        <div className="numRow">
            <button id="four">4</button>
            <button id="five">5</button>
            <button id="six">6</button>
        </div>
        <div className="numRow">
            <button id="seven">7</button>
            <button id="eight">8</button>
            <button id="nine">9</button>
        </div>
        <div className="opRow">
            <button id="add">+</button>
            <button id="subtract">-</button>
            <button id="multiply">*</button>
            <button id="divide">/</button>
        </div>
        <div className="etcRow">
            <button id="clear">Clear</button>
            <button id="decimal">.</button>
            <button id="equals">=</button>
        </div>
      </>
  ); 
}}

ReactDOM.render(<Calculator />, document.getElementById("calculator"));

每个 React 组件都应该有一个父元素。

【讨论】：

哦，好吧，抱歉这样的菜鸟问题

【解决方案2】：

(Link to fixed codepen).

在 JSX 中，通常应该返回单个 DOM 元素。因此，您的所有内容都应该包装在一个 div （或其他一些元素）中。

render(){
    return (
        <div>
            ALL YOUR CONTENT HERE
        </div>
    )
}

另一种解决方案是改用React.Framgent。如果它们包含在 React.Fragment 中，则可以返回多个 DOM 元素。这很有用，因为它避免了添加新的无意义的 div：

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

您可以将short syntax 用于这样的片段：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

【讨论】：

【解决方案3】：

只需将wrapper 添加到您的代码或<Fragment>，查看documentation 了解更多信息。您的代码可能因此而出错。

class Calculator extends React.Component{ 
  render(){
    return (
       <div>
        <div className="display"></div>
        <div className="numRow">
            <button id="one">1</button>
            <button id="two">2</button>
            <button id="three">3</button>
        </div>
        <div className="numRow">
            <button id="four">4</button>
            <button id="five">5</button>
            <button id="six">6</button>
        </div>
        <div className="numRow">
            <button id="seven">7</button>
            <button id="eight">8</button>
            <button id="nine">9</button>
        </div>
        <div className="opRow">
            <button id="add">+</button>
            <button id="subtract">-</button>
            <button id="multiply">*</button>
            <button id="divide">/</button>
        </div>
        <div className="etcRow">
            <button id="clear">Clear</button>
            <button id="decimal">.</button>
            <button id="equals">=</button>
        </div>
     </div>
  ); 
}}

ReactDOM.render(<Calculator />, document.getElementById("calculator"));

【讨论】：