ReactJs：如何创建一个包装器组件，该组件在单击时会执行某些代码并呈现子组件？

Posted 2023-02-19

【中文标题】ReactJs：如何创建一个包装器组件，该组件在单击时会执行某些代码并呈现子组件？

【英文标题】：ReactJs: How to create a wrapper component that would execute certain code when clicked and render the child component?

【发布时间】：2021-09-17 07:03:41

【问题描述】：

我正在尝试创建一个通用的 React 组件，我可以将它包裹在任何组件周围，并且在单击它时会执行一些代码：

class WrapperComponent extends React.Component 
  constructor() 
    super();
    this.state = ;
    this.onElementClicked = this.onElementClicked.bind(this);
  
  onElementClicked() 
    // CODE TO BE EXECUTED WHEN WRAPPER ELEMENT IS LICKED
  
  render() 
    const child_component=this.props
    return (
      <span
        onClick=() => 
          this.onElementClicked();
        
      >
        child_component
      </span>
    );
  

这就是我的使用方式：

  <WrapperComponent
    component=<Button>Test</Button>
  ></WrapperComponent>

这工作得很好。 但是，我认为遵循这种方法是不对的。这就是我想要实现的目标：

  <WrapperComponent>
        <Button>Test</Button>
      </WrapperComponent>

所以我所要做的就是用WrapperComponent 包装我想要的任何元素并获得相同的结果。 这可能吗？

【问题讨论】：

也许看看渲染道具？ reactjs.org/docs/render-props.html

看看你是否可以利用 props.children - ***.com/questions/49706823/…

使用 HOC？ ***.com/questions/52705522/…

props.children 完成了这项工作。谢谢大家。

【参考方案1】：

你在寻找这样的东西吗？ https://reactjs.org/docs/composition-vs-inheritance.html

您也许可以使用 props.children 访问子组件