Question

当前，我已经创建了一个包装BootstrapTable的组件。我必须定义一个代表数据列的常量。但是，我现在拥有的方式似乎真的使我的渲染方法混乱了。我想将其移动到其自己的文件中，但是我不确定执行此操作的最佳方法，因为它需要在类中定义的回调（特别是onUpdateClicked方法）。

如果我的工作方式很好，那么很高兴知道。但是，假设我确实想无论如何将其移动到另一个文件，我的建议都会对我的建议表示赞赏。谢谢！

    class MyTable extends Component {

    onUpdateClicked() {
        //do stuff
    }

    render() {
        let {data} = {...this.props}

        let columns = [
            {
                dataField: 'badge',
                text: 'Badge',
                sort: true
            }, {
                dataField: 'firstName',
                text: 'First',
                sort: true
            }, {
                dataField: 'lastName',
                text: 'Last',
                sort: true
            }, {
                dataField: 'email',
                text: 'Email',
                sort: true
            }, {
                dataField: 'loggedIn',
                text: 'Logged In',
                sort: true,
                formatter: (cell, row) => {
                    if (row.loggedIn) {
                        return (<FontAwesomeIcon icon="check"/>)
                    }
                }
            }, {
                dataField: 'update',
                text: 'Update',
                formatter: () => {
                    return (<Button onClick={this.onUpdateClicked} color="primary">Update</Button>)
                }
            }, 
        ];


        return (
            <div>
                <BootstrapTable Bootstrap4 keyField='badge' data={data} columns={columns}/>
            </div>
        )
    }
}

Answer 1

您可以将这些列放在单独的文件中，但是可以导出一个函数，该函数将一个函数作为参数用于onClick

Columns.js

const columnsFn = someFunc => ([ // pass the function as a param.
    {
        dataField: 'badge',
        text: 'Badge',
        sort: true
    }, {
        dataField: 'firstName',
        text: 'First',
        sort: true
    }, {
        dataField: 'lastName',
        text: 'Last',
        sort: true
    }, {
        dataField: 'email',
        text: 'Email',
        sort: true
    }, {
        dataField: 'loggedIn',
        text: 'Logged In',
        sort: true,
        formatter: (cell, row) => {
            if (row.loggedIn) {
                return (<FontAwesomeIcon icon="check"/>)
            }
        }
    }, {
        dataField: 'update',
        text: 'Update',
        formatter: () => {
            return (<Button onClick={someFunc} color="primary">Update</Button>) // use it here
        }
    }, 
]); 
export default columnsFn;

YourFile.js

import columnsFn from './columns';

class MyTable extends Component {

    onUpdateClicked() {
        //do stuff
    }

    render() {
        const {data} = {...this.props}
        const myColumns = columnsFn(this.onUpdateClicked); // pass the function here

        return (
            <div>
                <BootstrapTable Bootstrap4 keyField='badge' data={data} columns={myColumns}/>
            </div>
        )
    }
}

需要从类回调时将React常量移动到其自己的文件

1 个答案: