javascript - 将事件处理程序/ Prop 添加到 React 中的内部标记

Question

我正在尝试在 React 中创建一个可重复组件。目标是它可以被赋予任何有效 React 组件的group，并获取任何callbacks列表，并将这些回调应用到group元素。下面是我所做的事情，我将解释它与我之后想要做的事情有何不同。代码笔链接:

http://codepen.io/cirsca/pen/vKqzjZ?editors=0011

我的包装组件:

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>
    }
}

我的中继器组件:

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>
    }
}

我的虚拟组组件是:

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

只要我想将回调附加到 Group 组件中的根元素，此方法就有效。我想要的是一种可以将我的 callbacks 定位到嵌套 p 标记的方法，或者我不能对 onClick={callbacks.单击？ ....} 每个底层组件和操作(以防出现我没有放入代码中的新 onAction )。

我觉得我在这里把事情过于复杂化了，但不确定在哪里可以找到这个问题，或者通过谷歌搜索什么来开始。非常感谢任何和所有的帮助。

Answer 1

您可以递归克隆子项并向下传递 Prop

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>
)