ReactJS编程（二）—自定义组件

原创已于 2022-05-09 17:13:28 修改

· 666 阅读

0 ·

版权

文章标签：

#react #自定义组件

于 2019-05-05 21:26:17 首次发布

【React】专栏收录该内容

4 篇文章

订阅专栏

博客介绍了原生 HTML 元素和自定义 React 类名的命名规则，原生以小写开头，自定义以大写开头。还提及在 ReactJS 编程中已自定义 Name、Url 等组件进行页面元素封装，并表示有升级版内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。其实ReactJS编程（一）中，已经自定义了Name、Url等组件进行页面元素封装。写法很简单，如下。

<script type="text/babel">
//自定义一个HelloMessage组件
function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
//定义element接收组件
const element = <HelloMessage />;

ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

升级版

//升级版 需要向组件传递参数

function HelloMessage(props) {
    //通过 props.name 来获取name 属性
    return <h1>Hello {props.name}!</h1>;
}
 
//定义element变量，接收自定义组件HelloMessage的值
const element = <HelloMessage name="max"/>;
 
//将element渲染显示页面
ReactDOM.render(
    element,
    document.getElementById('example')
);