[Feature Request] [Table] Support pass custom porps to wrapper component

[NE-SmallTown]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently the components.body.wrapper component can't recevie any prop, but components.body.row can by the onRow prop.

What does the proposed API look like?

I would suggest support a new prop like onContainer or onWrapper, and then the logic is same as onRow.

[afc163]

What property you need to add on components.body.wrapper?

[NE-SmallTown]

It's about business logic, like I need to do some effects in the useEffect or event handler base on props.foo in the components.body.wrapper component, but now there is no way to do this.

[afc163]

I believe there is another way to implement this logic instead of adding extra props.

[NE-SmallTown]

是有，不过很麻烦。。比如可以通过 Context 来做：

const MyContext = React.createContext();

function Foo(props) {
  const xxx = useContext(MyContext);

  return ....
}

function MyTable(props) {

  return (
     <MyContext.provider value={ props.xxx }>
         <AntdTable components={{ body: { wrapper: Foo } }}>xxxxxx</AntdTable>
     </MyContext.provider>
  )
}

不过这样太麻烦了。。。从逻辑上来讲，如果提供了方式允许开发者自定义 wrapper，其本意应该就是让开发者可以自己控制给 tr，td，tbody 外层再套一层，但是现在套的这一层又不能传任何 props，而且 body.row 可以传只有 body.wrapper 不能传，哭泣

从需求上来讲，套一层的目的肯定是根据某个条件或者在某些情况下做一些定制化的东西呀，这个条件肯定是大概率从 props 来的，但是现在又不能传过去，哭泣

[afc163]

function Foo(props) {
  console.log(props.customProp); // 'customProp'

  return ....
}

- components={{ body: { wrapper: Foo } }}
+ components={{ body: { wrapper: (props) => <Foo {...props} customProp="customProp" /> } }}

是不是这样就能传递你想传的任何自定义属性了？

[NE-SmallTown]

不行。。

和 #32897 类似，这里 inline 的那个箭头函数组件每次 render 的时候都会被卸载

我理解之所以有 onRow 这个 prop，原因之一其实就是为了避免 components.body.row 出现上面的问题，看来之前并不是为了这个 😂

一般的库很少遇到这种问题，因为他们大多是透传 props 给 wrappr，如果透传太麻烦或者有风险(比如 table 这样 props 本来就非常多复杂的)，一般会选择一个单独的字段用那个字段透传，比如 antd table 的 onRow，或者叫 getWrapperProps 也行。

还有一种方式是不是接收一个 wrapper 了，而是直接提供一个 wrapper 组件或者写明声明一个 name 叫 xxx 的就当他是 wrapper，然后直接写 jsx element(当然自己不能有 children，而且要负责透传 children) 当作 children 传给库直接用

[NE-SmallTown]

@afc163 肿么样

[afc163]

和 #32897 类似，这里 inline 的那个箭头函数组件每次 render 的时候都会被卸载

这个可以用 React.memo 或 React.useCallback 进行优化的。

[NE-SmallTown]

@afc163 也不行的😂，因为现在有 bug，用了 React.memo 也一样会无限被卸载，原因在 #32897 (comment) 里解释啦

[NE-SmallTown]

@afc163 进行一个 friendly 的 ping #32922 (comment)