Перемещение константы 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>
        )
    }
}