Кнопки не отображаются в Codepen с использованием React

Я пытаюсь сделать калькулятор с помощью React, но не могу получить то, что находится в рендере, для отображения на странице. Он появлялся только с div "display".

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


reactjs javascript codepen
person hanuruh    schedule 02.02.2020    source источник
comment
Вы можете посмотреть мой ответ здесь: stackoverflow.com/a/59923480/4386148   -  person SanjiMika    schedule 02.02.2020
comment
Отвечает ли это на ваш вопрос? Почему Hello World не отображается?   -  person SanjiMika    schedule 02.02.2020

Ответы (3)


arrow_upward
3
arrow_downward 

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 должен иметь один родительский элемент.

person glinda93    schedule 02.02.2020
comment
о, ладно, извините за такой вопрос нуба - person hanuruh; 02.02.2020

arrow_upward
2
arrow_downward

(Ссылка на фиксированный код).

В JSX обычно следует возвращать один элемент DOM. Таким образом, весь ваш контент должен быть заключен в один div (или какой-либо другой элемент).

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

Другое решение - использовать взамен React.Framgent. Вы можете вернуть несколько элементов DOM, если они заключены в React.Fragment. Это полезно, потому что позволяет избежать добавления новых бессмысленных div:

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

Вы можете использовать короткий синтаксис для таких фрагментов:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
person Ismael Padilla    schedule 02.02.2020

arrow_upward
1
arrow_downward

Просто добавьте wrapper в свой код или <Fragment>, дополнительную информацию см. В документации. ваш код, вероятно, имеет ошибку из-за этого.

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"));
person ROOT    schedule 02.02.2020