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

不完全确定我的应用程序在这里出了什么问题。我正在使用create-react-app，我试图将所有组件都渲染到相应的根div中。问题是，我能够将所有组件都渲染到页面上，除了最后一个组件即Score组件。我甚至试过抛出该组件到一个div，我仍然得到了以下问题：错误React.Children.only预计会收到一个React元素子元素

'React.Children.only有望获得一个阵营元素孩子。

这是什么意思？

这是我的App.js结构。 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;

来源

2017-05-29 Benji Durden

你可以更新以及分数组件的'render'方法的问题？ –

@TharakaWijebandara刚刚编辑！谢谢 –

的

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;

含量react-transition-group documentation：

必须为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>

来源

2017-05-29 08:13:36

感谢帮助！仍然得到相同的错误，虽然:( –

这个问题只发生在渲染'Score'组件时？我假设你已经注释掉了，错误消失了，如果没有，请检查其他组件并渲染像'this.renderResult（） '。有没有什么有用的堆栈跟踪？ –

我能够渲染所有的组件都很好，除了Score组件（最后一个）。出于好奇，我改变了我的App.js中的组件顺序并移动第二到最后一个得分的位置，我仍然得到同样的错误。我想这可能与App.js是如何设置的话，因为该行的错误消息强调 'code'ReactDOM.render（，的document.getElementById（ '根'））;'code' –

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

回答

相关问题