Реагирующие выражения JSX должны иметь ошибку родительского элемента при добавлении второго <div>

Question

Когда я пытаюсь добавить другую реакцию, возвращается ошибка JSX Expressions must have one parent element. Я не понимаю, почему это так, поскольку у него есть родительский элемент.

  return (
<div className="loginButton">
    <header className="loginButton">
        <button className='discordLogin' id='login'
            href="link-here"></button>
    </header>
</div>
<div className="App">
    <header className="App-header">
        <img key={speed} src={logo} style={animationStyle} className="App-logo-circle" id='spinnerLogo'
            alt="Spinning logo" />
        <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope you enjoy your stay</strong>
        </p>
        <button className='App-button' id='fastLogoButton' onClick={faster}>Increase Spin Speed!</button>
        <button className='App-button' id='slowLogoButton' onClick={slower}>Decrease Spin Speed!</button>
    </header>
</div>
  );

PS. Ошибка происходит в) возврата.

Answer 1

У вас есть эта ошибка, потому что вы возвращаете два элемента одновременно. Оба ваших div'а должны быть заключены в родительский элемент.

Для этого вы можете использовать React.Fragment . Как упоминалось в документации (https://reactjs.org/docs/react-api.html#reactfragment)

Компонент React.Fragment позволяет возвращать несколько элементов в методе render () без создания дополнительного элемента DOM

return(
<React.Fragment>
 <div className="loginButton">
    <header className="loginButton">
        <button className='discordLogin' id='login'
            href="link-here"></button>
    </header>
 </div>
 <div className="App">
    <header className="App-header">
        <img key={speed} src={logo} style={animationStyle} className="App-logo-circle" 
          id='spinnerLogo'
          alt="Spinning logo" 
        />
        <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope 
          you enjoy your stay</strong>
        </p>
        <button className='App-button' id='fastLogoButton' onClick={faster}>
          Increase Spin Speed!
        </button>
        <button className='App-button' id='slowLogoButton' onClick={slower}>
          Decrease SpinSpeed!
        </button>
    </header>
  </div>
</React.Fragment>
);

Answer 2

Для компонентов React требуется вернуть только один элемент. Обычный шаблон в React - компонент возвращает несколько элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM.

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

Обычно эти элементы заключаются, например, в элемент div. В большинстве случаев div-обертка «не имеет значения» и добавляется только потому, что компоненты React требуют, чтобы вы возвращали только один элемент. Подробнее о фрагменте и см. Официальную документацию .