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开始:
请为您在转换组内呈现的组件添加一个键,甚至是静态键: <CSSTransitionGroup className="container result" transitionName="test" transitionEnterTimeout={500} transitionLeaveTimeout={300}> > <div key="transition-group-content" > You prefer <strong>{props.testScore}</strong>! </div> </CSSTransitionGroup> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |