javascript - 创建一个反应组件

Question

我正在尝试在 React 中创建一个组件（一个 HTML 圆圈），但出现“未知错误”：

ReactDom.render(
  <main>
    <h1>Below is my component</h1>
      <Html_component />
  </main>, document.getElementById('root') );
  
  function Html_component(){
  return(
    <main>
      <div style="border-radius: 50%; background-color: black; width: 10px; height: 10px;"></div>
    </main>
  )
}

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

标签： javascriptreactjs

Answer 1

ReactDOM.render期望作为第一个参数的实例化组件，你只是传递jsx.

function App() {
    return (
        <main>
            <h1>Below is my component</h1>
            <Html_component />
        </main>
    )
}

function Html_component() {
    return (
        <main>
            <div style="border-radius: 50%; background-color: black; width: 10px; height: 10px;"></div>
        </main>
    )
}

ReactDom.render(<App />, document.getElementById('root'));

记住，函数component是一个返回的函数jsx