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表文档中复制的。

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

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

根据antd网站上的建议，我使用了他们的沙箱模板，表格也不会呈现在那里。 https://codesandbox.io/s/mml3lz31ox

如果有人能在这里提供一些关于如何使用此表的见解，我很乐意听到它！

Answer 1

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

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

您的代码现在正在做的是传递子代，其中columns=，dataSource=等作为文本向下传递，{columns}等被解释为反应元素子元素。对象在那里无效，因此出错。

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

1 个答案: