标签：const nts index spec 展开 zed function 1.2 imp
import React from ‘react‘; import { PhotoStory, VideoStory } from ‘./stories‘; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Wrong! JSX type can‘t be an expression. return <components[props.storyType] story={props.story} />; }
为了解决这个问题，我们将其赋值给首字母大写的变量
import React from ‘react‘; import { PhotoStory, VideoStory } from ‘./stories‘; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Correct! JSX type can be a capitalized variable. const SpecificStory = components[props.storyType]; return <SpecificStory story={props.story} />; }
有多种方法指定JSX的props属性
1）JS表达式
可以传递任何大括号包裹的JS表达式作为props。
<MyComponent foo={1 + 2 + 3 + 4} />
对于MyComponent组件,props.foo属性等于10. if语句和for循环不是JS表达式，因此不能直接用于JSX。
2）字符串
可以传递一个字符串作为prop，因此下面的两条语句是等价的。
<MyComponent message="hello world" />
<MyComponent message={‘hello world‘} />
3）prop默认为true
下面两种表述是等价的
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
4）扩展运算符
展开对象的形式，使用...+对象名,React自动看成是多个属性名
var props={ one:‘123‘, two:321 } <HelloWorld {...props}/>
在拥有开闭标签的JSX表达式中，开闭标签之间的内容传递给了props.children属性，有多种不同的方法来传递children。
1）字符串
开闭标签之间可以是字符串，因此props.children就是这个字符串
<MyComponent>Hello world!</MyComponent>
在这里props.children=Hello world!
JSX会移除空格，因此下面的几种表述是等价的：
<div>Hello World</div> <div> Hello World </div> <div> Hello World </div> <div> Hello World </div>
2）JSX children
你也可以提供更多的JSX元素作为children,这在嵌套组件中很有用：
<MyContainer> <MyFirstComponent /> <MySecondComponent /> </MyContainer>
你可以混合不同类型的children,因此你可以混合使用字符串和JSX children
<div>
Here is a list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
3）javascript children
可以使用任何大括号括起来的JS表达式作为children，比如下面这两种表述是相同的
<MyComponent>foo</MyComponent>
<MyComponent>{‘foo‘}</MyComponent>
这通常用于呈现JSX任意长度列表，比如下面这种呈现一个HTML列表
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> ); }
JS表达式还可以跟其他类型的children一起混用，这通常用于字符串模板
function Hello(props) { return <div>Hello {props.addressee}!</div>; }
4）函数
props.children可以传递任何数据，比如你有一个custom组件，你可以使用一个回调函数作为props.children.
function ListOfTenThings() { return ( <Repeat numTimes={10}> {(index) => <div key={index}>This is item {index} in the list</div>} </Repeat> ); } // Calls the children callback numTimes to produce a repeated component function Repeat(props) { let items = []; for (let i = 0; i < props.numTimes; i++) { items.push(props.children(i)); } return <div>{items}</div>; }
5）booleans,null,undefined are ignored
false,true,null,undefined都是合法的children，他们只是不渲染，下面这些表达式将渲染成同样的
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{true}</div>
当需要有条件的渲染某个react组件时，这是很有用的，
<div>
{showHeader && <Header />}
<Content />
</div>
标签：const nts index spec 展开 zed function 1.2 imp
原文地址：http://www.cnblogs.com/YangqinCao/p/6139480.html
