将自定义 JSX 标签转换为自定义函数答案

【问题标题】：Transpile custom JSX tag to custom function将自定义 JSX 标签转换为自定义函数
【发布时间】：2020-05-09 15:58:36
【问题描述】：

React 的 JSX 转译器转换标签：

<MyComponent />

到：

React.createElement("MyComponent")

我需要开发一些东西，以便在使用标签时：

<TagFunction msg={varMessage} />

转换为：

function() {alert(varMessage); }

听起来很奇怪，但这是真正需要的简化示例。

有可能吗？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您可以通过这种方式创建自定义组件：

const CustomComponent = (props) => {
   const { varMessage } = props;
   alert(varMessage);
   return null;
}

然后像这样使用它：

<CustomComponent varMessage="my message" />

您也可以定义一个 varMessage 变量并将其传递给 varMessage 属性！

【讨论】：

我真的需要在转译器上完成这项工作。我需要它真正成为一个函数，而不是一个 React 组件。

【解决方案2】：

据我所知，您需要一种在渲染标签时执行某些代码的方法。我假设你只想运行那段代码一次或在某些条件发生变化时运行

如果你使用钩子，你可以将它实现为一个简单的组件，并在 useEffect 中添加逻辑

const LogicComponent = ({msg}) => {
   useEffect(() => {
         alert(msg)
   }, [msg])

   return null;
}

但是如果你不使用钩子，你将不得不编写一个类组件并实现它的 componentDidMount 和 componentDidUpdate 生命周期

class LogicComponent extends React.Component {
   componentDidMount() {
      this.myFunction();
   }

   componentDidUpdate(prevProps) {
      if(this.props.msg !== prevProps.msg) {
          this.myFunction()
      }
   }
   myFunction = () => {
      alert(this.props.msg)
   }
}

【讨论】：