Reactjs 错误React.Children。仅应接收单个React元素子元素

我不完全确定我的应用程序出了什么问题。我正在使用createreact应用程序，并且我正在尝试将我的所有组件呈现到相应的根div中。问题是，我能够将所有组件呈现到页面上，除了最后一个组件，Score组件。我甚至尝试将该组件放入div中，但仍然遇到以下问题：

“React.Children.only应接收单个React元素子级”

这到底意味着什么

这是我的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;

render（）{
返回(
宝宝宝
{this.state.result？this.renderResult（）：this.renderTest（）}
);
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“反应转换组/CSSTransitionGroup”导入CSSTransitionGroup；
功能评分（道具）{
返回(
>
您更喜欢{props.testScore}！
);
}
Score.propTypes={
quizResult:PropTypes.string，
};
导出默认分数；

来自：

必须为CSSTransitionGroup的所有子项提供键属性，即使仅呈现单个项。这就是React将如何确定哪些孩子已经进入、离开或留下

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

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

>
您更喜欢{props.testScore}！

>^**此处必须输入错误**
^**删除此“>”打字错误解决我的问题**

---

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

我在使用CSS转换时遇到了相同的错误。对我来说，有效的方法是使用这些React标记：

来包装css转换标记中的标记

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

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

{current.quote}

{current.client}

你能用

render

分数成分方法更新问题吗？@TharakaWijebandara刚刚编辑！谢谢你的帮助！但是仍然得到相同的错误：（问题是否仅在呈现

Score

组件时发生？我假设您注释掉了它，错误消失了。如果没有，请检查其他组件并呈现类似

this.renderResult（）的函数）

。堆栈跟踪中有什么有用的东西吗？除了分数部分（最后一个）之外，我可以很好地渲染所有组件出于好奇，我更改了App.js中的组件顺序，并将倒数第二个移动到了Score的位置，我仍然收到相同的错误。我认为这可能与App.js的设置有关，因为这一行在错误消息中突出显示

code

ReactDOM.render（，document.getElementById（'root'））

code

请暂时删除

，然后重新运行测试，看看会发生什么。我认为根本问题在其他地方，比如在某个只需要一个子元素的第三方组件中，或者在

renderResult

或

renderTest

方法中。对于您的用例，我认为使用CSS制作动画是一种更好的方法。注意在

props.testScore

组件中未定义

Score

，除非您将其作为prop

传递。当我在源代码中挖掘时，我想到的唯一一件事是将内容包装两次：

您更喜欢{props.testScore}！

因为错误的来源是：

返回React.cloneElement（React.Children.only（this.props.Children），props）

虽然这个代码片段可以解决这个问题，但它并没有解释为什么或者如何回答这个问题。请注意，这确实有助于提高您的文章质量。请记住，您是在为将来的读者回答这个问题，而那些人可能不知道您的代码建议的原因。@LucaKiebel，谢谢您根据你的建议，我已经更新了我的帖子。

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