javascript - 警告 : Functions are not valid as a React child. 如果您从渲染中返回一个组件而不是 <Component/>，则可能会发生这种情况

Question

当我尝试显示{props.child}时出现上述错误。页面仍然空白。详细警告是

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (at CustomLayout.js:28)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at CustomLayout.js:22)
    in section (created by BasicLayout)
    in BasicLayout (created by Context.Consumer)
    in Layout (at CustomLayout.js:8)
    in CustomLayout (at App.js:10)
    in div (at App.js:9)
    in App (at src/index.js:7)

下面是项目文件。 Article.js 是一个组件，而 ArticleListView 和 CustomLayout 是它的容器。我正在尝试通过 {props.children}

访问 CustomLayout.js 中的子元素

App.js

import React from 'react';
import './App.css';
import 'antd/dist/antd.css';
import CustomLayout from './containers/CustomLayout'
import ArticleListView from './containers/ArticleListView'; 

function App() {
  return (
    <div className="App">
        <CustomLayout>
            {ArticleListView}
        </CustomLayout>
    </div>
  );
}

export default App

ArticleListView.js

import React from 'react'
import Article from '../components/Article'

class ArticleListView extends React.Component{
    render(){
        return(
            <Article/>
        );
    }
}

export default ArticleListView

文章.js

import React from 'react'

import { List, Avatar, Icon } from 'antd';

const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'http://ant.design',
    title: `ant design part ${i}`,
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

function Article(props){
    return(
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
            onChange: page => {
                console.log(page);
            },
            pageSize: 3,
            }}
            dataSource={listData}
            footer={
            <div>
                <b>ant design</b> footer part
            </div>
            }
            renderItem={item => (
            <List.Item
                key={item.title}
                actions={[
                <IconText type="star-o" text="156" key="list-vertical-star-o" />,
                <IconText type="like-o" text="156" key="list-vertical-like-o" />,
                <IconText type="message" text="2" key="list-vertical-message" />,
                ]}
                extra={
                <img
                    width={272}
                    alt="logo"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
                }
            >
                <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.href}>{item.title}</a>}
                description={item.description}
                />
                {item.content}
            </List.Item>
            )}
        />
    );
}



export default <Article/>

自定义布局.js

import React from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;

function CustomLayout(props){
  return(
        <Layout className="layout">
        <Header>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>{props.children}</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
  );
}

export default CustomLayout

Answer 1

如果您使用任何 javascript 表达式，则仅使用花括号，例如 - {a+b} .

但是您需要按照 React 标准导入 html 标签或 React 组件。

这样使用

<CustomLayout>
 <ArticleListView />
</CustomLayout>

并更改您的 export default <Article/>至 export default Article