如何用JSX定义内联组件？求等价于htm匿名组件的写法

你用htm写的匿名组件逻辑，对应的JSX可以通过两种方式实现，都能满足你在测试中提取Hook值的需求：

方式1：直接渲染匿名函数组件 #

这种写法和你的htm实现逻辑最接近，将匿名函数作为组件标签使用，注意组件必须返回一个React节点（这里返回null即可，因为不需要渲染实际内容）：

let loc;
render(
  <div>
    <(() => {
      loc = useLocation();
      return null;
    }) />
  </div>,
  scratch
);

方式2：在JSX表达式中调用匿名函数 #

另一种更常见的写法是在JSX的大括号表达式中直接调用匿名函数，同样要保证Hook在组件渲染的顶层调用：

let loc;
render(
  <div>
    {(() => {
      loc = useLocation();
      return null;
    })()}
  </div>,
  scratch
);

注意事项 #

React要求Hook必须在组件的顶层调用，所以不管用哪种方式，这个匿名函数都必须是组件渲染流程的一部分——要么作为被渲染的组件，要么在组件的渲染过程中被执行，不能放在普通的非组件函数里调用Hook。

内容的提问来源于stack exchange，提问作者Devildude4427