用另一个组件修改一个组件（也许是 HOC？）

Question

我已经看到一些库，例如 react 中的“framer-motion”使用这种语法工作，例如插入一个动画 H1：<motion.h1> 这将转换为一个 h1，但动画在组件的 props 中定义.

我不明白的是“运动”组件如何访问“h1”，然后在函数中它知道要渲染动画的组件。

我需要创建一个组件，例如 <lazy.div>，它解释一个 div 并带有我要定义的某些修改。

我需要知道的是如何使用该语法而不是典型的

<Lazy><h1>Content<h1> </Lazy>

是否也可以使用这种类型的语法来修改链元素或向那些已经修改的组件添加功能？

例如<lazy.fullwidth.div>

Answer 1

当你创建一个函数时，这个函数就是一个对象。然后，您可以向该对象添加任何属性，并且属性本身可以是另一个函数。

所以如果你有一个 react 组件函数，你可以让它的属性也成为组件函数。

简单示例：

const Example = () => (<div>Example Main Component</div> );

Example.h1 = () => (<h1>Example.h1 component</h1>)

const App = () => (
  <div>
    <Example />
    <Example.h1/>
  </div>  
  )

// Render it
ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>