极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<script src="http://cdn.bootcss.com/react/15.6.1/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Content activities={activities} />
</div>
</div>
)
}
}
class Content extends React.Component {
render() {
const {activities} = this.props;
return (
<div className="content">
<div className="line"></div>
{activities.map((activity) => {
{/* 无法渲染 */}
<ActivityItem
activity={activity} />
})}
</div>
)
}
}
class ActivityItem extends React.Component {
render() {
const {activity} = this.props;
return (
<div className="item">
<div className="avatar">
<img src={activity.user.avatar} />
{activity.user.name}
</div>
<span className="time">
{activity.timestamp}
</span>
<p>{activity.text}</p>
<div className="commentCount">
{activity.comments.length}
</div>
</div>
)
}
}
const activities = [
{
timestamp: new Date().getTime(),
text: "Ate lunch",
user: {
id: 1, name: 'Nate',
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
},
comments: [{ from: 'Ari', text: 'Me too!' }]
},
{
timestamp: new Date().getTime(),
text: "Woke up early for a beautiful run",
user: {
id: 2, name: 'Ari',
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
},
comments: [{ from: 'Nate', text: 'I am so jealous' }]
},
]
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
</script>
</html>通过上面的代码浏览器不渲染，不报错。
但不抽离 ActivityItem 组件，直接在 Content 组件中渲染，是OK的。
class Content extends React.Component {
render() {
const {activities} = this.props;
return (
<div className="content">
<div className="line"></div>
{activities.map((activity) => {
return (
<div className="item">
<div className="avatar">
<img src={activity.user.avatar} />
{activity.user.name}
</div>
<span className="time">
{activity.timestamp}
</span>
<p>{activity.text}</p>
<div className="commentCount">
{activity.comments.length}
</div>
</div>
)
})}
</div>
)
}
}请问各位老司机，问题出在哪里？
么有return 还有没有key
class Content extends React.Component {