函数作为React子函数无效。如果从呈现中返回组件而不是<Component />，则可能发生这种情况。
函数作为React子函数无效。如果从呈现中返回组件而不是<Component />，则可能发生这种情况。
提问于 2018-10-09 08:13:53
我想显示我的页面上发送的帖子，但是它有一个错误：
函数作为React子函数无效。如果返回组件而不是呈现，则可能会发生这种情况。或者您打算调用这个函数，而不是返回它。
守则如下：
import React, { Component } from 'react';
import { render } from 'react-dom';
const rootNode = document.getElementById('root');
class Blog extends Component {
constructor(props) {
super(props);
this.Header = this.Header.bind(this);
this.UnderHeader = this.UnderHeader.bind(this);
}
Header() {
this.props.posts.map(post => <li key={post.id}>{post.title}</li>);
}
UnderHeader() {
this.props.posts.map(post => {
return (
<div key={post.id}>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
});
}
render() {
return (
<div>
<ul>{this.Header}</ul>
<hr />
{this.UnderHeader}
</div>
);
}
}
const posts = [
{ id: 1, title: 'title1', content: 'content1' },
{ id: 2, title: 'title2', content: 'content2' },
{ id: 3, title: 'title3', content: 'content3' },
{ id: 4, title: 'title4', content: 'content4' }
];
render(<Blog posts={posts} />, rootNode);回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-09 08:17:15
如果你想渲染JSX，
- 您必须像调用
this.Header()那样调用函数，this.Header是一个函数引用不调用它。 - 您必须返回
map的结果，“`map”返回一个需要从函数返回的JSX组件数组。
代码：
const { Component } = React;
const { render } = ReactDOM;
const rootNode = document.getElementById('root');
class Blog extends Component{
constructor(props){
super(props)
this.Header=this.Header.bind(this)
this.UnderHeader=this.UnderHeader.bind(this)
}
Header(){
return this.props.posts.map((post)=><li key={post.id}>{post.title}</li>)
}
UnderHeader(){
return this.props.posts.map((post)=>{
return(
<div key={post.id}>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
})
}
render(){
return(
<div>
<ul>
{this.Header()}
</ul>
<hr/>
{this.UnderHeader()}
</div>
)
}
}
const posts =[
{id :1 ,title :'title1' ,content :'content1'},
{id :2 ,title :'title2' ,content :'content2'},
{id :3 ,title :'title3' ,content :'content3'},
{id :4 ,title :'title4' ,content :'content4'},
]
render(
<Blog posts ={posts}/>,
rootNode
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52716296
复制相关文章
相似问题
腾讯云开发者
