向作为道具传递的组件添加额外的道具

Question

我在 react-redux 应用程序中使用 React Table along with React Custom Scrollbars。要连接这两者，我需要在 react table 中覆盖 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 错误。

Answer 1

为什么这不起作用？

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

此外，我认为您不需要通过 props.children - 默认情况下应该会发生。

作为参考，我查看了此处对类似问题的回答：

Answer 2

解决方法是将TableBody无状态组件转换为完整组件，即

class TableBody extends React.Component {

而不是

const TableBody = props => {

这就是 React-Table 所期待的。

Answer 3

试试这个

<ReactTable TbodyComponent={v => <DropTbody test={null} />}

向作为道具传递的组件添加额外的道具

Adding additional props to a component passed as a prop

reactjs

react-table