错误 React.Children.only 预计会收到单个 React 元素子元素

Question

不完全确定我的应用程序出了什么问题。我正在使用 create-react-app，我正在尝试将我的所有组件渲染到各自的根 div。问题是，除了最后一个 Score 组件之外，我能够将所有组件呈现到页面上。我什至尝试将该组件放入 div 中，但我仍然遇到以下问题：

'React.Children.only expected to receive a single React element child'.

这到底是什么意思？

这是我的 App.js 结构。

render() {
   return (
       <div className="App">
           <div className="App-header">
              <h2>BAO BAO BAO</h2>
           </div>
           {this.state.result ? this.renderResult() : this.renderTest()}
           <Baoquestion />
           <AnswerChoices />
           <BaoScore />
           <Score />
       </div>      
    );
}


export default App;

Score.js

的内容

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

 function Score(props) {

 return (
 <div>
 <CSSTransitionGroup 
  className="container result"
  transitionName="test"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
 >
  <div>
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>
</div>
);

 }

 Score.propTypes = {
 quizResult: PropTypes.string,
 };

 export default Score;

Answer 1

来自react-transition-group documentation：

You must provide the key attribute for all children of CSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

然后请为您在过渡组中呈现的组件添加一个键，即使是静态键：

<CSSTransitionGroup 
 className="container result"
 transitionName="test"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}>
>
  <div key="transition-group-content" >
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>

Answer 2

<CSSTransitionGroup 
 className="container result"
 transitionName="test"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}>
>                            ^ ** Must be a typo here **
^ ** Remove this '>' typo solve my problem **

这个错误的根本原因'Error React.Children.only expected to receive a single React element child'是JSX代码结尾有两个'>'。删除其中一个“>”解决了这个问题。

Answer 3

我在使用 CSS Transitions 时遇到了同样的错误。对我有用的是使用这些 React 标签：<></> 环绕 css 转换标签内的标签。

注意我在 TransitionGroup 和 CSSTransition 标签中有两个标签，如下所示：

 <TransitionGroup>
       <CSSTransition key={quotesArr[active]}>
          <>
            <p>{current.quote}</p>
            <h2>{current.client}</h2>
          </>
       </CSSTransition>
  </TransitionGroup>

错误 React.Children.only 预计会收到单个 React 元素子元素

Error React.Children.only expected to receive a single React element child

jsx

reactjs

create-react-app