Javascript 未使用React在Codepen上渲染的按钮

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

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。

只需在代码中添加一个包装器，或检查以获取更多信息。您的代码可能因此而出错

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"));

只需在代码中添加一个包装器，或者，检查以获取更多信息。您的代码可能因此而出错

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"));

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

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

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

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

您可以对以下片段使用：

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

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

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

您可以对以下片段使用：

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

---

你可以在这里看到我的答案：这是否回答了你的问题？你可以在这里看到我的答案：这是否回答了你的问题？哦，好吧，抱歉这样的问题哦，好吧，抱歉这样的问题