不完全确定我的应用程序出了什么问题。我正在使用 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;
From 反应过渡组文档 https://github.com/reactjs/react-transition-group:
即使仅渲染单个项目,您也必须为 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)