加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 错误React.Children.only期望收到一个React元素子

发布时间:2020-12-15 16:19:39 所属栏目:百科 来源:网络整理
导读:我不完全确定我的应用程序出了什么问题.我正在使用create-react-app,我正在尝试将所有组件渲染到相应的根div中.问题是,我能够将所有组件渲染到页面上,除了最后一个组件,分数组件.我甚至尝试将该组件放入div中,我仍然遇到以下问题: ‘React.Children.only预
我不完全确定我的应用程序出了什么问题.我正在使用create-react-app,我正在尝试将所有组件渲染到相应的根div中.问题是,我能够将所有组件渲染到页面上,除了最后一个组件,分数组件.我甚至尝试将该组件放入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;

解决方法

从 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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读