antd表不会呈现。 对象作为React子对象无效

Question

我真的很喜欢到目前为止在antd中看到的内容，并且试图将其介绍到当前的代码库中，但是即使将示例复制并粘贴到表格中，我似乎也无法获得要渲染的表。新项目。 例如：

我运行create-react-app来获取一个新项目，并像这样更新了应用程序组件：

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import {Table} from 'antd'

class App extends Component {
    render() {

        const columns = [{
            title: 'Name',
            dataIndex: 'name',
            render: text => <a href="#">{text}</a>,
        }, {
            title: 'Age',
            dataIndex: 'age',
        }, {
            title: 'Address',
            dataIndex: 'address',
        }]

        const data = [{
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        }, {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        }, {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        }, {
            key: '4',
            name: 'Disabled User',
            age: 99,
            address: 'Sidney No. 1 Lake Park',
        }]

        // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        }

        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    <Table>
                        columns={columns}
                        dataSource={data}
                        rowSelection={rowSelection}
                    </Table>
                </p>
            </div>
        )
    }
}

export default App

请注意，column，data和rowSelection定义是直接从antd Table文档中复制的。

当页面尝试渲染时，出现错误“对象作为React子对象无效”

我正在运行React 16.2，但似乎在antd文档中找不到任何版本兼容性信息，因此我不确定这是否是问题。

按照antd网站上的建议，我使用了他们的沙箱模板，该表格也不会在此处呈现。 https://codesandbox.io/s/mml3lz31ox

如果有人可以在此提供一些有关如何使用此表的见解，我很乐意听到！

Answer 1

语法不正确。 应该是这样的：

<Table
  columns={columns}
  dataSource={data}
  rowSelection={rowSelection}
/>

您的代码现在正在执行的操作是传递子代，将columns= ， dataSource=等作为文本向下传递，而{columns}等则被解释为react元素的子代。 对象在那里无效，因此出错。