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

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