javascript - 当需要从类中回调时，将 React 常量移至其自己的文件中

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>
        )
    }
}