[英]antd table won't render. Objects are not valid as a React child
I really like what I've seen in antd so far, and I'm trying to introduce it to my current code base, but I can't seem to get a table to render, even when I just copy and paste examples into a new project. 我真的很喜欢到目前为止在antd中看到的内容,并且试图将其介绍到当前的代码库中,但是即使将示例复制并粘贴到表格中,我似乎也无法获得要渲染的表。新项目。 For example:
例如:
I ran create-react-app to get a fresh project, and updated the app component like so: 我运行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
Note that the column, data, and rowSelection definitions were copied directly from the antd Table docs. 请注意,column,data和rowSelection定义是直接从antd Table文档中复制的。
When the page attempts to render, I get the error "Objects are not valid as a React child" 当页面尝试渲染时,出现错误“对象作为React子对象无效”
I'm running React 16.2, but can't seem to find any version compatibility info in the antd docs so I'm not sure if that's an issue here. 我正在运行React 16.2,但似乎在antd文档中找不到任何版本兼容性信息,因此我不确定这是否是问题。
Following the advice on the antd website, I used their sandbox template, and the table won't render there either. 按照antd网站上的建议,我使用了他们的沙箱模板,该表格也不会在此处呈现。 https://codesandbox.io/s/mml3lz31ox
https://codesandbox.io/s/mml3lz31ox
If anyone can offer some insight here on how to use this table, I'd love to hear it! 如果有人可以在此提供一些有关如何使用此表的见解,我很乐意听到!
The syntax is incorrect. 语法不正确。 It should be this:
应该是这样的:
<Table
columns={columns}
dataSource={data}
rowSelection={rowSelection}
/>
What your code is doing now is passing children instead, with columns=
, dataSource=
etc. being passed down as text, with {columns}
and the like being interpreted as react element children. 您的代码现在正在执行的操作是传递子代,将
columns=
, dataSource=
等作为文本向下传递,而{columns}
等则被解释为react元素的子代。 Objects are not valid there, hence the error. 对象在那里无效,因此出错。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.