注意:组件的定义的名称首字母需要大写
- 函数组件定义
import ReactDOM from 'react-dom/client';
import React from 'react';
function Ikun(props) {
return <h1>我是: {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Ikun name="爱坤"/>
);
- 类组件定义
import ReactDOM from 'react-dom/client';
import React from 'react';
class Ikun extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>我是: {this.props.name}</h1>;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Ikun name="爱坤" />
);
如上 <Ikun name="爱坤" />这种自定义标签称之为“道具”。