错误 React.Children.only 期望接收单个 React 元素子元素

Posted 2023-02-22

【中文标题】错误 React.Children.only 期望接收单个 React 元素子元素

【英文标题】：Error React.Children.only expected to receive a single React element child

【发布时间】：2017-10-29 10:34:36

【问题描述】：

不完全确定我的应用程序出了什么问题。我正在使用 create-react-app，我正在尝试将我的所有组件渲染到相应的根 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;

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;

【问题讨论】：

你能用render Score 组件的方法更新问题吗？

@TharakaWijebandara 刚刚编辑！谢谢

【参考方案1】：

来自react-transition-group documentation：

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

然后请为您在转换组中呈现的组件添加一个键，甚至是静态键：

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

【讨论】：

感谢您的帮助！但是仍然遇到相同的错误:(

只有在渲染Score 组件时才会出现此问题？我假设您已将其注释掉并且错误消失了。如果没有，请检查其他组件和渲染函数，如this.renderResult()。堆栈跟踪中有什么有用的吗？

我可以很好地渲染所有组件，除了 Score 组件（最后一个）。出于好奇，我更改了 App.js 中的组件顺序并移动了第二个最后一个到 Score 的位置，我仍然遇到同样的错误。我认为这可能与 App.js 的设置方式有关，因为这一行在错误消息codeReactDOM.render(, document.getElementById('root'));@987654327 中突出显示@

请暂时删除<Score>，然后重新运行测试，看看会发生什么。我认为根本问题出在其他地方，例如在某些第三方组件中，它只需要一个孩子，或者在 renderResult 或 renderTest 方法中。

对于您的用例，我认为使用 CSS 制作动画是一种更好的方法。请注意，props.testScore 在 Score 组件中未定义，除非您将其作为道具 <Score testScore=5 /> 传递。当我在源代码中挖掘时，我想到的唯一一件事就是将您的内容包装两次：<div key="transition-group-content" ><div>You prefer <strong>props.testScore</strong>!</div></div> 因为错误的来源是：return React.cloneElement(React.Children.only(this.props.children), props); in github.com/reactjs/react-transition-group/blob/master/src/…

【参考方案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代码的结尾有两个'>'。删除其中一个“>”解决了这个问题。

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

@LucaKiebel，谢谢你的建议，我已经更新了我的帖子。

【参考方案3】：

我在使用 CSS 过渡时遇到了同样的错误。对我有用的是使用这些 React 标签：<></> 来包裹 css 转换标签内的标签。

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

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