如何将React元素嵌入到组件中？

Question

我正在学习React Js，我有一个初学者问题： 我创建了一个React元素

const element = <h1>Hello, world</h1>;

我不明白，为什么我需要大括号将元素放在组件

中

const Module = () => 
<div>
{element}  // why {element} not element
</div>;
ReactDOM.render( <Module/>, document.getElementById('root') );

Answer 1

  

为什么{element}不是元素

因为没有pdf_data = result.body pdf_data.slice!(0, pdf_data.index("%EOL").to_i + 4) if(pdf_data.length <= 4) # handle error else # save/send pdf_data end ，你只是在写HTML文本; div中会有“元素”这个词。 {...}表示应在{...}所在的位置评估和使用的表达式;在这种情况下，该表达式只是一个变量引用，因此它嵌入了变量的值，该值是在计算表达式时（当调用{...}无状态功能组件时）。

Answer 2

你可能更容易通过反应网站上的Hello World!示例而不是在stackoverflow中解释它的和平餐。你所指的是JSX，这是一个由反应团队创建的类似html外观的语法。大括号是将变量注入JSX并使代码更具可读性的一种方法。你能想象如果没有大括号插入变量会有多么混乱。你看看元素并说，它们是指单词元素还是变量元素？