React组件创建报错：实现HTML圆形组件时遇未知错误

嘿，我帮你排查出代码里的几个关键问题啦，咱们一步步来修正：

主要错误点 #

• Style属性格式不对：React中的style属性要求传入JavaScript对象，而不是HTML里的字符串格式。而且CSS属性名要改成驼峰式（比如borderRadius代替border-radius），不能用短横线写法。
• 组件定义顺序有误：你把Html_component的定义写在了ReactDOM.render之后，JavaScript是自上而下执行的，这时候渲染代码找不到这个组件，自然会抛出未知错误。
• （可选）组件命名规范：React组件推荐用大驼峰命名法，比如HtmlComponent，虽然这不会直接导致错误，但能让代码更符合社区通用规范。

修正后的完整代码 #

// 先定义组件，再执行渲染操作
function HtmlComponent() {
  return (
    <main>
      {/* style传入对象，属性使用驼峰式命名 */}
      <div style={{
        borderRadius: '50%',
        backgroundColor: 'black',
        width: '10px',
        height: '10px'
      }}></div>
    </main>
  )
}

// 执行组件渲染
ReactDOM.render(
  <main>
    <h1>Below is my component</h1>
    <HtmlComponent />
  </main>,
  document.getElementById('root')
);

<div id="root"></div>

这样修改后，你的黑色圆形组件就能正常渲染出来啦～

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