如何在React.jsx文件中包含标准html

Question

我是ReactJS的新手，我正在从事一个由其他人编写的项目web项目，所以我在编程的同时也在学习。

我有一个登录屏幕，屏幕上有一个用于输入电子邮件和密码的文本框。现在构建它们的方式是，在jsx文件中有以下内容：

<FormString  Id= "" Label="" Icon=""....... />
<FormPassword  Id="" Label=" "......./>

我需要定义一个吗？或者我可以简单地使用如下的html选择选项吗？

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>

感谢

Answer 1

您可以将代码作为组件的返回(您可以创建您的-FormCar，也可以从您的示例中返回(，记住您必须只有一个父级，并且所有标记都应该在中，就像在我的示例中一样，一个父级别是div标记。

return (
<div>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
)

此外，您还可以将html与已有的组件一起使用

return (
<div>
<FormString  Id= "" Label="" Icon=""....... />
<FormPassword  Id="" Label=" "......./>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
)