一、 choosing the type at runtime
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} />; }
二、 props in JSX
this.props引用属性,属性是不可以由组件自己进行修改,组件的属性是由父组件传递进来的。有多种方法指定JSX的props属性
2.1 键值对形式
<HelloWorld propName=propValue />
propValue可以是字符串,大括号包起来的数字或字符串{},大括号包起来的数组{[]},大括号包起来的一个变量,即时函数
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'} />
2.2 prop默认为true
下面两种表述是等价的
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
2.3 defaultProps
可以通过指定defaultProps属性值来指定prop的默认值,这是用在未定义的props上,但是当props值为null时并不起作用:
class CustomButton extends React.Component { // ... } CustomButton.defaultProps = { color: 'blue' }; render() { return <CustomButton /> ; // props.color will be set to blue } render() { return <CustomButton color={null} /> ; // props.color will remain null }
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props: 静态属性 类名.属性名
Greeting.defaultProps = {
name: 'Stranger'
};
// Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
defaultProps用来确保当父组件没有提供值时,this.props.name仍然能够取到值,propTypes类型检测发生在defaultProps解析之后,所以类型检测也是适应于defaultProps.
2.3 扩展运算符
展开对象的形式,使用...+对象名,React自动看成是多个属性名
var props={ one:'123', two:321 } <HelloWorld {...props}/>
要经常使用解构赋值
class FancyCheckbox extends React.Component{ render() { var { checked, title, ...other } = this.props; var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; var fancyTitle = checked ? 'X ' + title : 'O ' + title; return ( <label> <input {...other} checked={checked} className={fancyClass} type="checkbox" /> {fancyTitle} </label> ); } });
三、children in JSX
在拥有开闭标签的JSX表达式中,开闭标签之间的内容传递给了props.children属性,你没办法通过 this.props.children
取得当前组件的子元素。 因为this.props.children
返回的是组件拥有者传递给你的 passed onto you 子节点。
class App extends React.Component{ componentDidMount() { // This doesn't refer to the `span`s! It refers to the children between // last line's `<App></App>`, which are undefined. console.log(this.props.children); } render() { return <div><span/><span/></div>; } } ReactDOM.render(<App></App>, mountNode);
有多种不同的方法来传递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>
一些看起来像是false的值,比如说数字0,是会被React渲染的。比如下面这个例子,可能并不是你想象的结果,当props.message是一个空数组时,仍然会渲染:
<div> {props.messages.length && <MessageList messages={props.messages} /> } </div>
要解决这个问题,就要确保&&逻辑运算符前面的表达式是boolean:
<div> {props.messages.length > 0 && <MessageList messages={props.messages} /> } </div>
相反地,如果你需要在输出中输出false,true,null,undefined这些值,你需要将他们转化为字符串:
<div>
My JavaScript variable is {String(myVariable)}.
</div>
谨慎处理props.children
this.props.children的值有三种可能:如果当前组件没有子节点,他就是undefined;如果有一个子节点,数据类型是object;如果有多个子节点,数据类型就是array。所以处理this.props.children的时候要小心。
React提供了一个工具方法React.Children来处理this.props.children.
React.Children.map
我们可以用React.Children.map来遍历子节点,而不用担心this.props.children的数据类型是undefinde还是object.
React.Children.map(children, function[(thisArg)])
在每一个直接子级(包含在 children
参数中的)上调用 function
函数,此函数中的 this
指向 thisArg
。如果 children
是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 function
中。如果 children 参数是 null
或者undefined
,那么返回 null
或者 undefined
而不是一个空对象。
<script type="text/jsx"> class NotesList extends React.Conponent{ render(){ return( <ol> { React.Children.map(this.props.children,function(child){ return <li>{child}</li>; }) } </ol> ); } } React.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById('example') ); </script>
React.Children.forEach
类似React.Children.map(),只是不会返回array
React.Children.forEach(children, function[(thisArg)])
React.Children.count
返回 children
当中的组件总数,和传递给 map
或者 forEach
的回调函数的调用次数一致。
React.Children.count(children)
React.Children.only
返回唯一的子节点,否则报错
React.Children.only(children)
React.Children.toArray
给子节点分配key值,转化为数组形式返回,这个方法在render中操作子节点集合是有用的,尤其是当你想要重新排列或者分割this.props.children时。
React.Children.toArray(children)
五、属性和状态对比
5.1 属性和状态的相似点
- 都是纯JS对象
- 都会触发render更新
- 都具有确定性,给定相同的属性和相同的状态,会有相同的结果
5.2 属性和状态的不同点
属性this.props | 状态this.state | |
能否从父组件获取初始值 | 能 | 否 |
能否由父组件修改 | 能 | 否 |
能否在组件内部设置默认值 | 能 | 能 |
能否在组件内部修改 | 否 | 能 |
能否设置子组件的初始值 | 能 | 否 |
能否修改子组件的值 | 能 | 否 |
状态就是和组件自己相关的,既不和父组件相关也不和子组件相关。
组件不能修改自己的属性,可以从父组件获得属性,父组件可以修改它的属性,他也可以修改子组件的属性。
由于this.props和this.state都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,
this.props 表示那些一旦定义,就不再改变的特性,而 this.state是会随着用户互动而产生变化的特性。
5.3 简单的区分
组件在运行时需要修改的数据就是状态。
比如:用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取.
文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况