javascript - 创建一个 React 组件

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>

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'));

请记住，功能性组件是一个返回jsx的函数