1.再顾JSX
语法
从我第一篇博客来看,JSX
其实就是提供了一个实现React.createElement(component, props, ...children)
函数的便捷方法
<MyButton color="blue" shadowSize={
2}>
Click Me
</MyButton>
React
编译完后就形成了
React.createElement(
MyButton,
{
color: 'blue', shadowSize: 2},
'Click Me'
)
所以注意,第一个参数不一定是一个DOM
参数,只要是一个JSX
组件或者是DOM
标签。
当然如果你不加入子内容的话
<div className="sidebar" />
直接闭合标签即可
编译后
React.createElement(
'div',
{className: 'sidebar'},
null
)
2.不要试图用属性访问符来构造JSX
组件
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
//Warning : no allowed
return <MyComponents.DatePicker color="blue" />;
}
这种使用.
属性访问符进行构建JSX
组件虽然不会报错,但是不允许
3.用户自定义的组件名必须是大写的
function hello(props) {
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
return <hello toWhat="World" />;
}
此方法是不会有任何输出的
至于为什么之前的博客也讲过,DOM
元素才能用小写,其他的都应该用大写。
如果你已经将一个组件的名字写成了小写,可以将它赋值给一个大写的变量即可
function HelloWorld