Javascript 向React中的内部标记添加事件处理程序/道具

我试图在React中创建一个可重复的组件。目标是，它可以被赋予任何有效的React组件

组

，并获取任何

回调列表

，并将这些回调应用于

组

元素。下面是我的作品，我会解释它和我想做的有什么不同。链接到代码笔：

我的包装组件：

class App extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            callbacks: {
                onClick: (e) => console.log('I was clicked!')
            }
        }
    }

    render(){
        return <div>
            <Repeatable 
                group={<Group />}
                {...this.state.callbacks}
            />
        </div>
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
回调：{
onClick：（e）=>console.log（'我被点击了！'）
}
}
}
render（）{
返回
}
}

我的中继器组件：

class Repeatable extends React.Component {
    constructor(props){
        super(props)
        const {group, ...callbacks} = this.props
        this.state = {
            group: group || <div>This is awesome!</div>,
            list: [group],
            callbacks
        }
    }

    addGroup = () => this.setState({
        list: [
            ...this.state.list,
            this.state.group
        ]
    });

    render(){
        return <div id={this.props.cssID || 'react_repeatable'}>
            <button onClick={this.addGroup}>Add Group</button>
            <div className="repeated__list">
                {this.state.list.map(el => {
                    return React.cloneElement(el, {...this.state.callbacks})
                })}
            </div>
        </div>
    }
}

类可重复扩展React.Component{
建造师（道具）{
超级（道具）
const{group，…callbacks}=this.props
此.state={
组：组| |这太棒了！，
列表：[组]，
回调
}
}
addGroup=（）=>this.setState({
名单：[
…这个.state.list，
这个州的团体
]
});
render（）{
返回
添加组
{this.state.list.map（el=>{
返回React.cloneElement（el，{…this.state.callbacks}）
})}
}
}

我的虚拟组组件是：

const Group = ({className, ...callbacks}) => (
    <div className={className || 'repetable__block'} {...callbacks}>
        <p>Here is a repeatable group!</p>
    </div>
)

constgroup=（{className，…callbacks}）=>(
这是一个可重复的组

)

只要我想将回调附加到

组

组件中的根元素，这种方法就可以工作。我想要的是，我的

callbacks

可以针对嵌套的

p

标记，或者我不能对每个底层组件和操作进行10亿次

onClick={callbacks.onClick？…}

（以防出现一个新的onAction，而我没有将其放入代码中）

---

我觉得这里的事情太复杂了，但我不确定该去哪里寻找答案，也不确定该从谷歌开始做什么。非常感谢您提供的任何帮助。

您可以递归克隆子项并传递道具

const recursiveCloneChildren = (children, props) => {
  return React.Children.map(children, child => {
    let childProps = {};
    if (React.isValidElement(child)) {
      childProps = props;
    }
    childProps.children = this.recursiveCloneChildren(child.props.children);
    return React.cloneElement(child, childProps);
  })
}

const Group = ({className, children, ...callbacks}) => (
  <div className={className || 'repetable__block'} {...callbacks}>
    {recursiveCloneChildren(children, callbacks)}
  </div>
)

const recursiveCloneChildren=（子对象、道具）=>{
返回React.Children.map（Children，child=>{
让childProps={}；
if（React.isValidElement（子项））{
儿童道具=道具；
}
childProps.children=this.recursiveCloneChildren（child.props.children）；
返回React.cloneElement（child，childProps）；
})
}
常量组=（{className，children，…callbacks}）=>(
{recursiveCloneChildren（子级，回调）}
)

这正是我试图概念化的东西，只是无法在脑海中将其分解为更小的步骤。非常感谢你！