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() {
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() {
const Hello = hello;
return <Hello toWhat="World" />;
}
4.正确的选择基于同一架构的不同组件
不要试图用表达式来构造JSX 组件标签,如下
const components = {
photo: PhotoStory,video: VideoStory
};
function Story(props) {
return <components[props.storyType] story={props.story} />;
}
此方法会报错,解决的方案是,将这哥值赋值给一个大写开头的变量即可。
const components = {
photo: PhotoStory,video: VideoStory
};
function Story(props) {
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
这里还需要注意的是,对于组件的名字是必须不同的,但是可以用相同的变量来处理,因为变量只是承载组件的容器而已,它作用只是为了让React 可以将JSX 语句变为一个对象。
function Story2(props) {
return <div>22222222222</div>;
}
function Story(props) {
return <div>22222222221</div>;
}
let Str = Story2;
ReactDOM.render(
<Str />,document.getElementById('example') ); Str = Story; ReactDOM.render( <Str />,document.getElementById('example1') );
5.JSX 中props 的多种运用
【这里介绍的内容有一部分在第一篇博客就讲到了】
javascript 表达式
<MyComponent foo={1 + 2 + 3 + 4} />
字符串字面量
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
由于字符串处理的时候,React 会自动将字符串进行转义处理,所以下面两个语句是等价的。
<MyComponent message="<3" />
<MyComponent message={'<3'} />
属性的默认值
当你设定一个属性但是没有为他设置一个值的话,它的默认值会是 true .
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
两者是等价的,当然强烈要求不要这么做,如果有属性一定要赋初始值,因为这有可能和ES6 的新对象特性相混淆。
在ES6 中{autocomplete} 表示的是{autocomplete : autocomplete} 而不是{autocomplete:true} ,所以请使用第二种方式
6.扩展运算符
如果你有一个对象,想将它完整的传递给JSX 作为JSX 的props 属性对象时,你可以使用... 扩展运算符
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben',lastName: 'Hector'};
return <Greeting {...props} />;
}
上述的第二个函数式组件的操作就相当于将props 赋值给了App2.props 属性
扩展运算符是ES6 的新特性,它的作用基本和我们for in 有点类似,遍历一个对象将它的所有属性都提取出来。
当然在这里的运用,官方建议尽可能少用这种方式给JSX 语句对象props 属性赋值,因为会造成很多空间浪费,因为你可能有很多属性都不会用到。
7.JSX 的children 属性
当我们增加子内容给一个组件时,就相当于将内容增加到这个组件的children 属性中,一般有以下几种应用方式。
字符串字面量
我们可以在组件之间增加字符串字面量,当然这个字面量可以是HTML 语句,但是需要注意一点的是,这里的字符串字面量是没有被编码的,也就是说,当我们通过大括号进行表达式插入时,默认是进行编码的,而你自己增加的内容是不会被编码的,所以在这里我们可以像在HTML 中用标签一样在这里用,比如空格的话我们就需要用& 才能真的隔离开字符串
<div>This is valid HTML & JSX at the same time.</div>
这样的原因是,JSX 会自动删除空格符,换行符,等等。
<div>Hello World</div> <div> Hello World </div>
<div> Hello World </div> <div> Hello World </div>
上述的四种情况的最终视图呈现结果是一样
JSX 作为孩子
将JSX 语句对象又作为孩子
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
我们可以在组件中混用HTML 和JSX ,React 会自动的处理,区分
javascript 表达式
首先可以明确地是任何javascript 表达式只要放在大括号中都可以在JSX 中使用,毫无障碍,所以放在孩子中是没有一点问题的。
甚至我们可以直接将一个数组输出到我们的JSX 中
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc','submit pr','nag dan to review'];
return (
<ul> {todos.map((message) => <Item key={message} message={message} />)} </ul> ); }
函数也是个孩子
可以是匿名函数,也可以是箭头函数
function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
}
function ListOfTenThings() {
return (
<Repeat numTimes={10}> {(index) => <div key={index}>This is item {index} in the list</div>} </Repeat> ); }
8.Booleans ,Null ,和Undefined 是无用的
false ,null ,undefined ,和 true 虽然用大括号括起来是一个合法的孩子,但是他们不会被呈现在视图中
<div />
<div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>
这些代码都是等价的。
既然不会显示,那么留着这个有个毛线用,当然是有用的,我们可以通过这些东西来选择性的输出数据给视图显示
<div>
{showHeader && <Header />} <Content /> </div>
因为showHeader 为false 的时候不会将这一行的数据显示出来,而为true 的时候则会显示<Head /> 的内容
当然如果是一些特殊的转换判断就得另算了,比如说0 和1 他们会被判断为false 和true ,但是会显示出来。
<div>
{props.messages.length &&
<MessageList messages={props.messages} /> } </div>
这里props.messages.length 等于0 的话,会显示出一个0 ,所以我们使用时一定要将它变为一个布尔表达式
<div>
{props.messages.length > 0 &&
<MessageList messages={props.messages} /> } </div>
当然如果你想输出这几个单词的话,对不起了,只能转换为字符串输出
<div>
My JavaScript variable is {String(myVariable)}.
</div>
下一篇将讲React 中的类型检查
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|