从渲染 prop 元素的子元素返回回调

Question

地狱。我对渲染道具模式有一些疑问。

组件“ColumnAction”处理表头宽度调整，并通过捕获 mouseDown 和 mouseUp 等事件来重新排序每个表头。为此，我小时候就通过了 ref、ref2。

但是，我添加的一件事是捕捉每个孩子的一些动作。当每个子组件调用一些事件（例如属性更改）时，父组件应该捕获它，并在主组件中采取另一个操作。

为此，我尝试了一些改变，并尝试将道具传递给每个孩子。但所有的尝试都失败了。我似乎无法将 prop 传递给渲染 props。

这个问题有什么解决办法吗？预先感谢。

    const TableHead = props.selectedAttributes.map(attribute => {
        
        const attributeDetail = props.attributes.find(attr => attr.attribute === attribute)
        
        return (
            <ColumnAction key={attribute}>
                {
                    ({ ref, ref2 }) => (
                        <th className='UniveralGridTableHead draggable' data-attrb={attribute} data-menu={props.menu} ref={ref2}>
                            {attributeDetail.label}
                            <i
                                className='sortDesc'
                                style={{
                                    display: attributeDetail.sortable ? 'inline-block' : 'none',
                                    borderTop: props.orderBy === attribute && props.orderDirection === 'DESC' ? '5px solid #EEEEEE' : '5px solid #888888'
                                }}
                                onClick={() => props.conditionCallback('sortDesc', attribute)}
                            ></i>
                            <i
                                className='sortAsc'
                                style={{
                                    display: attributeDetail.sortable ? 'inline-block' : 'none',
                                    borderBottom: props.orderBy === attribute && props.orderDirection === 'ASC' ? '5px solid #EEEEEE' : '5px solid #888888'
                                }}
                                onClick={() => props.conditionCallback('sortAsc', attribute)}
                            ></i>
                            <div className='ColumnResizer' ref={ref}></div>
                        </th>
                    )
                }
            </ColumnAction>
        )
    })

Answer 1

终于找到解决办法了，而且很简单...

家长

// Pass props to get callback like this

<ColumnAction key={attribute} someCallback={dd => doSomething(dd)}>

儿童

const ColumnAction = props => {

    // Declare both chilren and callback props 
    const { children, someCallback } = props
...

    // Call the callback function when you use
    someCallback('SomeAction')