函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况答案

【问题标题】：Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <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);

【问题讨论】：

我知道这方面的错误！ render(){ return(
{this.Header}

{this.UnderHeader}
) }

标签： reactjs

【解决方案1】：

如果你想渲染 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>

【讨论】：