我不完全确定我的应用程序出了什么问题。我正在使用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的所有子项提供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>
<CSSTransitionGroup
className="container result"
transitionName="test"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
> ^ ** Must be a typo here **
^ ** Remove this '>' typo solve my problem **
这个错误的根本原因'错误React.Children.only期望接收一个React元素子'是在JSX代码的结尾有两个'>'。删除其中一个'>解决了这个问题。