props & children-白红宇

props & children

阅读量：5073 次

发布时间：2019-06-12

本文共 6097 字，大约阅读时间需要 20 分钟。

一、 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 
     ;}

为了解决这个问题，我们将其赋值给首字母大写的变量

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 
     ;}

二、 props in JSX

this.props引用属性，属性是不可以由组件自己进行修改，组件的属性是由父组件传递进来的。有多种方法指定JSX的props属性

2.1 键值对形式

propValue可以是字符串，大括号包起来的数字或字符串{}，大括号包起来的数组{[]},大括号包起来的一个变量，即时函数

1）JS表达式

可以传递任何大括号包裹的JS表达式作为props。

对于MyComponent组件,props.foo属性等于10. if语句和for循环不是JS表达式，因此不能直接用于JSX。

2）字符串

可以传递一个字符串作为prop，因此下面的两条语句是等价的。

2.2 prop默认为true

下面两种表述是等价的

2.3 defaultProps

可以通过指定defaultProps属性值来指定prop的默认值，这是用在未定义的props上，但是当props值为null时并不起作用：

class CustomButton extends React.Component {  // ...}CustomButton.defaultProps = {  color: 'blue'}; render() {    return 
      ; // props.color will be set to blue  }render() {    return 
      ; // props.color will remain null  }

class Greeting extends React.Component {  render() {    return (      Hello, {this.props.name}
    );  }}// Specifies the default values for props: 静态属性 类名.属性名Greeting.defaultProps = {   name: 'Stranger'};// Renders "Hello, Stranger":ReactDOM.render( 
     , document.getElementById('example') );

defaultProps用来确保当父组件没有提供值时，this.props.name仍然能够取到值，propTypes类型检测发生在defaultProps解析之后，所以类型检测也是适应于defaultProps.

2.3 扩展运算符

展开对象的形式，使用...+对象名,React自动看成是多个属性名

var props={    one:'123',    two:321}

要经常使用解构赋值

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 (                      {fancyTitle}          );  }});

三、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 `
     `, which are undefined.    console.log(this.props.children);  }  render() {    return 
     
      
      
     
;  }}ReactDOM.render(
     , mountNode);

有多种不同的方法来传递children。

1）字符串

开闭标签之间可以是字符串，因此props.children就是这个字符串


     
      Hello world!

在这里props.children=Hello world!

JSX会移除空格，因此下面的几种表述是等价的：


     
      Hello World
     
     
        Hello World
     
     
        Hello  World
     
     
        Hello World

2）JSX children

你也可以提供更多的JSX元素作为children,这在嵌套组件中很有用：

你可以混合不同类型的children,因此你可以混合使用字符串和JSX children


     
        Here is a list:  
          
       Item 1
    
       Item 2

3）javascript children

可以使用任何大括号括起来的JS表达式作为children，比如下面这两种表述是相同的


     
      foo
     
     
      {'foo'}

这通常用于呈现JSX任意长度列表，比如下面这种呈现一个HTML列表

function Item(props) {  return {props.message}
;}function TodoList() {  const todos = ['finish doc', 'submit pr', 'nag dan to review'];  return (    
     
            {todos.map((message) => 
      )}    
     
  );}

JS表达式还可以跟其他类型的children一起混用，这通常用于字符串模板

function Hello(props) {  return 
     
      Hello {props.addressee}!
     
;}

4）函数

props.children可以传递任何数据，比如你有一个custom组件，你可以使用一个回调函数作为props.children.

function ListOfTenThings() {  return (    
     
            {(index) => 
      
       This is item {index} in the list
      
}    
       );}// Calls the children callback numTimes to produce a repeated componentfunction Repeat(props) {  let items = [];  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));  }  return 
     
      {items}
     
;}

5）booleans,null,undefined are ignored

false,true,null,undefined都是合法的children，他们只是不渲染，下面这些表达式将渲染成同样的


     
     
     
      {
   false}
     
     
      {
   null}
     
     
      {
   true}

当需要有条件的渲染某个react组件时，这是很有用的，


     
        {showHeader && 
      
}

一些看起来像是false的值，比如说数字0，是会被React渲染的。比如下面这个例子，可能并不是你想象的结果，当props.message是一个空数组时，仍然会渲染：


     
        {props.messages.length &&    
        }

要解决这个问题，就要确保&&逻辑运算符前面的表达式是boolean：


     
        {props.messages.length > 0 &&    
        }

相反地，如果你需要在输出中输出false,true,null,undefined这些值，你需要将他们转化为字符串：


     
        My JavaScript variable is {String(myVariable)}.

谨慎处理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 而不是一个空对象。

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
能否从父组件获取初始值	能	否
能否由父组件修改	能	否
能否在组件内部设置默认值	能	能
能否在组件内部修改	否	能
能否设置子组件的初始值	能	否
能否修改子组件的值	能	否