2

我在 react-redux 应用程序中使用React Table和React Custom Scrollbars 。要连接这两者，我需要覆盖 React 表中的 TbodyComponent ，这样我就可以用滚动条包装默认的 tbodycomponent 并传递额外的道具来调整渲染。这是一些精简的代码：

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 道具通过？

更新：用 createElement 和 cloneElement 进行试验，仍然收到 130 错误。

4

3 回答 3

1

解决这个问题的方法是将 TableBody 无状态组件转换为完整组件，即

class TableBody extends React.Component {

代替

const TableBody = props => {

这就是 React-Table 所期待的。

于 2018-05-04T19:38:15.607 回答
0

有没有理由为什么这不起作用？

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

另外，我认为您不需要传递 props.children - 这应该默认发生。

作为参考，我查看了此处提供的类似问题的答案：https ://stackoverflow.com/a/39655113/8060919

于 2018-05-03T21:02:27.883 回答
0

试试这个

<ReactTable TbodyComponent={v => <DropTbody test={null} />}
于 2019-09-24T02:25:34.000 回答