Добавление дополнительных реквизитов в компонент, переданный в качестве реквизита - PullRequest
Новая
       16

Добавление дополнительных реквизитов в компонент, переданный в качестве реквизита

0 голосов
/ 03 мая 2018

Я использую React Table вместе с React Custom Scrollbars в приложении реагировать на избыточность. Чтобы соединить эти два, мне нужно переопределить TbodyComponent в таблице реакции так, чтобы я мог обернуть стандартный компонент tbody с полосами прокрутки и передать дополнительные параметры для настройки рендеринга. Вот несколько урезанных кодов: 

import React from 'react'
import ReactTable from 'react-table'
import {ReactTableDefaults} from 'react-table'
import { Scrollbars } from 'react-custom-scrollbars'

const TableBody = props => {
    //get additional props beyond just props.children here
    const {autoHeight} = props

    return (
        <Scrollbars 
            style={{
                height: '100vh'
            }}
        >
            <ReactTableDefaults.TbodyComponent>
                 {props.children}
            </ReactTableDefaults.TbodyComponent>
        </Scrollbars>
    )
}


const Table = props => {
    //props stuff would go here

    return (
            <div className="react-table-wrapper">
                <ReactTable {...props}
                            TbodyComponent={TableBody} //this works
                            //TbodyComponent={(props) => {return (<TableBody autoHeight={props.autoHeight} children={props.children} />)}} //this doesn't
                            data={data}
                            columns={columns}
                            ...
                />
            </div>
    )
}

Полагаю, я не понимаю, как правильно передать компонент в свойстве TbodyComponent, props.children или что-то подобное. Этот метод просто завершает цикл навсегда.

В этом примере, как я могу заставить пропустить autoHeight prop?

Обновление: Экспериментировал с createElement и cloneElement и по-прежнему получал ошибку 130.

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Решением этой проблемы было преобразование компонента без сохранения состояния TableBody в полный компонент, то есть 

class TableBody extends React.Component {

вместо 

const TableBody = props => {

Вот чего ожидал React-Table.

0 голосов
/ 04 мая 2018

Есть ли причина, по которой это не сработает? 

TbodyComponent={<TableBody autoHeight={props.autoHeight} />}

Кроме того, я не думаю, что вам нужно передавать props.children - это должно происходить по умолчанию.

Для справки я посмотрел приведенный здесь ответ на похожий вопрос: https://stackoverflow.com/a/39655113/8060919

...