没有使用render函数的组件如何转换

Question

这里第三点有些疑问，如果我的组件是个无状态组件
比如：

export const Input = () => {
	return (
	<div>test</div>
	);
}

当我在别的组件里引用这个组件的时候要怎么转化呢，看起来这里似乎并没有用到render函数

Answer 1

双越 2020-02-24 09:20:05

无状态组件和 class 组件不一样，它没有 render 这个函数。但是它依然会返回 JSX ，跟 class 组件的 render 一样。

只要有了 JSX ，那就可以正常渲染了。

• 提问者 justShaw #1

  那请问我在别的组件里使用这个组件时，别的组件的jsx代码转换时是会成为React.createElement(Input)还是会成为React.createElement(‘div’)这样的呢？

• 双越 回复 提问者 justShaw #2

  JSX 被编译解析之后，肯定得到 React.createElement(‘div’) 的。

• 提问者 justShaw 回复 双越 #3

  好的 谢谢老师