根据 className 动态添加事件处理程序

Question

我有一个 React 函数组件，我在 props 中获得了另一个组件。像这样的东西：function ChildComponent({cmp}) {    // Here onClick handlers should be added [for example:    // () => console.log("clicked")] to all    // elements in cmp of class .clickable    return ...}function ParentComponent() {    return (        <ChildComponent cmp={<div><button>Non-clickable</button><button className="clickable">Clickable</button></div>} />    )}那么如何在ChildComponent中的cmp props 变量中动态地将事件处理程序添加到具有可点击类的元素？预先感谢您的帮助。

Answer 1

这使用了Children API，该API 允许您根据当前的道具修改儿童的道具。ChildComponent 将首先循环遍历其当前子项，查找clickable className道具onClick并向其道具添加处理程序。

递归循环也允许嵌套子项工作。

function ChildComponent({ cmp }) {

  const handleOnClick = () => {

    alert("Clicked");

  };

  const childrenMap = (child) => {

    if (child.props) {

      const newProps = Object.assign({}, child.props);

      const { children, className } = newProps;

      if (className && className.split(' ').some(cn => cn === 'clickable')) {

        newProps.onClick = handleOnClick;

      }

      if (children) {

        newProps.children = Children.map(children, childrenMap);

      }

      return cloneElement(child, newProps);

    }

    return child;

  }

  return Children.map(cmp, childrenMap);

}

function ParentComponent() {

  return (

    <ChildComponent

      cmp={(

        <div>

          <button>Non-clickable</button>

          <div>

            <div>

              <button className="clickable">Clickable</button>

            </div>

          </div>

          <button className="clickable">Clickable</button>

        </div>

      )}

    />

  );

}