时间戳

首页 > 解决方案 > 使用 React 在 Codepen 上未呈现按钮

javascript - 使用 React 在 Codepen 上未呈现按钮

问题描述

我正在尝试使用 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

标签： javascriptreactjscodepen

解决方案

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 组件都应该有一个父元素。

推荐阅读