antd table 不会渲染。对象作为 React 子项无效

Question

到目前为止，我真的很喜欢我在 antd 中看到的东西，我正试图将它引入我当前的代码库，但我似乎无法获得 table 来渲染，甚至当我只是将示例复制并粘贴到一个新项目中时。例如：

我运行 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 文档中复制的。

当页面尝试呈现时，出现错误 "Objects are not valid as a React child"

我是运行 React 16.2，但似乎无法在 antd 文档中找到任何版本兼容性信息，所以我不确定这是否是这里的问题。

按照antd网站上的建议，我用了他们的sandbox模板，table也不会在那里渲染。 https://codesandbox.io/s/mml3lz31ox

如果有人可以在这里提供一些关于如何使用它的见解 table，我很想听听！

Answer 1

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

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

您的代码现在正在做的是传递 children，columns=、dataSource= 等作为文本传递，{columns} 等作为文本传递解释为反应元素 children。 Objects 在那里无效，因此出现错误。

antd table 不会渲染。对象作为 React 子项无效

antd table won't render. Objects are not valid as a React child

reactjs

antd