javascript - 创建一个React组件(Creating a React component)

Question

I'm trying to create one component (one HTML-circle) in React, but I get 'unknown error':

(我正在尝试在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> 

  ask by Drax translate from so

Answer 1

ReactDOM.render expects as first argument an instantiated component, you are just passing jsx .

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

Remeber, a functional component is a function which returns jsx

(记住，功能component是返回jsx的函数)