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元素的子代。 對象在那里無效，因此出錯。