解决这个问题之前，要先了解 Antd的 Table中的 Column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 官网地址
从中我们可以知道 : render 生成复杂数据的渲染函数，参数分别为（当前行的值，当前行数据，行索引），@return 里面可以设置表格行/列合并 类型是函数 (text, record, index) => { }
点击后弹出以下列表
解决：
两种写法 ：
列表页面补充：
0.给子组件传值 ： <Share happy={record} loadUserList={()=> {this._loadUserList()}}/> 子组件接收值
1.设置state中值的时候 不要直接赋值 ， 要 使用规范写法
1 this.setState({
2 visible_father: true
3 })
2.子组件接到数后不能展示列表？
1 onClick={() => {
2 this.setState({
3 visible_father: true //修改列表展示为true
4 })
5 }}
3.dataSource中的数据this.props.item 是对象 所以要再外面加一个[] 使其变为数组
4.const {number, visible_father, data, loading,} = this.state; 解构赋值后 ， 就不需要在this.state.xxx了
5.<Modal /> 有个visible属性，表示是否显示对话框。
占位
1.Form表单
Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 常用API ： getFieldDecorator 用于和表单进行双向绑定，详见下方描述class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。
你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值(可以设置默认值)。
initialValue）与状态，如不传入参数，则重置所有组件
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (err) {
return;
}
values.rate = values.rate / 100;
window.$http.postForm(‘/api/‘, {...this.state.item,...values}).then(res => {
if (res.status === 10000) {
window.$message.success(‘提交成功！‘);
this.props.form.resetFields();
this.setState({visible: false})
this.getBonusList()
} else {
window.$message.error(res.message);
}
}).catch((err) => {
window.$message.error(‘通讯失败‘);
})
});
}
2. Affix 固钉 https://ant.design/components/affix-cn/#header
注意：Affix 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 Affix 为绝对定位：
<Affix style={{ position: ‘absolute‘, top: y, left: x }}>...</Affix>
3.Card 卡片 https://ant.design/components/card-cn/#header
4.父子传值 ， 传方法
首先父组件调用子组件，写一个item = { recodr（columns表单所有数据） } 写一个 refreshList方法
然后再子组件调用 (使用this.props.XXX)调用父组件的XXX
调用属性 （这里又把父组件的值传给了子组件CustomForm）
<CustomForm
content={this.state.content} onSubmit={this.onSubmit} url={‘/api/backend/distribution/time/category/save‘}
value={{ id: this.props.item.id }}
values={this.props.item}
space={86400}
/>
调用方法
onSubmit = () => {
this.setState({
visible: false
})
this.props.refreshList()
}
5.弹窗 Modal
6.文本域： const { textArea } = Input 去掉右下角调整大小按键 ： CSS resize：none；
7.上传图片 Upload
8.修改状态
{
// width: 150,
title: ‘操作‘,
dataIndex: ‘status‘, //verified
key: ‘status‘,
render: (text, item) => (
<>
{item.status != 1 ? null :
<Switch
checked={text === 1}
onChange={() => {
this.changeStatus(text, item.id);
}}
/>}
</>
)
}
9.删除一行记录
{
title: ‘操作‘,
render: (text, item) => {
return (
<div>
<Button size={‘small‘} type={‘primary‘} onClick={() => {
this.props.history.push(‘/content/carousel/edit/‘ + item.id)
}}>
编辑
</Button>
<Popconfirm
title="确定要删除吗？"
okText="确定"
cancelText="取消"
onConfirm={() => {
window.$http.postForm(‘/api/web/carousel/delete‘, {id: item.id}).then(res => {
if (res.status === 10000) {
window.$message.success(‘删除成功‘);
this._loadNewsList()
} else if (res.status !== 18888) {
window.$message.error(res.message);
}
})
}}
>
<Button size={‘small‘} type={‘danger‘} style={{marginLeft: 20}} onClick={() => {
}}>删除</Button>
</Popconfirm>
</div>
);
}
}
10 徽标微
import {Badge} from ‘@ant-design/react-native‘;
<Badge dot>
<Touchable style={{position: ‘relative‘}}>
<Image source={message} />
</Touchable>
</Badge>
import {Badge} from ‘@ant-design/react-native‘;
<Badge dot>
<Touchable style={{position: ‘relative‘}}>
<Image source={message} />
</Touchable>
</Badge>
原文：https://www.cnblogs.com/Leo_wl/p/11796272.html