按钮未使用React在Codepen上渲染

Question

我正在尝试使用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。https://codepen.io/hanuruh/pen/dyPxRNX

Answer 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 Component应该有一个父元素。

Answer 2

（Link to fixed codepen）。

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

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

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

React.Fragment

您可以将

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

用于类似这样的片段：

short syntax

Answer 3

只需在您的代码或

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

中添加wrapper，请检查<Fragment>以获取更多信息。您的代码可能因此而出错。

documentation