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} 等被解释为反应元素子代。对象在那里无效，因此出现错误。