我不太确定我的应用程序出了什么问题。我正在使用create-react-app,并尝试将所有组件呈现到各自的根div中。问题是,我能够将所有组件呈现到页面上,除了最后一个分数组件。我甚至尝试将该组件投入到一个div中,但仍然遇到以下问题:“React.Children.only expected to receive a single React element child”。这是什么意思?下面是我的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
方法? - Tharaka Wijebandara