react-开发经验分享-Table表格组件里跳转页面及传递数据

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，Table表格组件里跳转页面及传递数据的方法
在Table表格组件中，经常会遇到表格里有跳转页面的需求
跳转方法大致与普通react页面路由方法类似
依然是在columns方法里对需要跳转的td位置进行render自定义设置
设置方法如下：

// 使用onClick进行按键触发跳转，并且可以传参给子页面
// 传递的参数在子页面的props.location.state对象里面
columns = [
        {
            title: '操作',
            width: 120,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            fixed: 'right',
            // 跳转详情页
            render: (text, record) => {
                return <a onClick={() => this.toShopDetails(record.id)}>商铺情况</a>
            }
        },
]

// 跳转详情页
    toShopDetails = (id) => {
        this.props.history.push(`${this.props.match.url}/shopDetail`, {id});
    }

注意点：
别忘记把子页面引入

import ShopDetails from '../shop/shopDetails'; // 详情页

也别忘了在写上路由

<LayerRouter>
     <Route path={`${this.props.match.url}/shopDetail`} render={props => <ShopDetails {...props} />} />
</LayerRouter>