ReactJS不会渲染所有JSX

Question

我正在ReactJs中构建一个登录页面。我是这个软件的新手，所以我可能使用了HTML而不是JSX。我在signIn.js中的ReactJS代码如下：

const input = (
<div class="omrs-input-group">
<label class="omrs-input-underlined">
<input required style="height:55px" id="nameFirst" />
<span class="omrs-input-label">First Name</span>
<span class="omrs-input-helper" id="alertFirst">Please type in your first name</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7z"/></svg>
</label>
<br/>

</div>
)  

ReactDOM.render(
input,
document.getElementById('firstNameForm')
)

当我尝试渲染时，我得到的警告是Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.出于调试目的，我尝试渲染

const input = (
<h1>Hello World!</h1>
)
ReactDOM.render(
input,
document.getElementById('firstNameForm')
)

并且它呈现在屏幕上。我的错误是什么？任何帮助都将不胜感激！谢谢

Answer 1

react中的style属性需要一个对象值，而不是字符串。

style={{height: "55px"}}

这应该可以解决您的问题。

代码：https://stackblitz.com/edit/react-gevqap