警告：函數作為 React 子項無效。如果您返回組件而不是返回組件，則可能會發生這種情況<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 中的子元素

應用程序.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} 。

但形成 html 標簽或反應組件，您需要根據反應標准導入。

像這樣使用

<CustomLayout>
 <ArticleListView />
</CustomLayout>

並更改您的export default <Article/>以export default Article

Answer 2

它應該是<ArticleListView/> ，而不是{ArticleListView}

Answer 3

嘗試

<CustomLayout>
 <ArticleListView />
</CustomLayout>

而不是

<CustomLayout>
  {ArticleListView}
</CustomLayout>

Answer 4

在 javascript 我們像 isConditionTrue 一樣工作？ 屏幕一：屏幕二

但是在 typescript 我們必須改變 isConditionTrue？ :