react系列（18）小技巧

1.this.props.children

 this.props.children常用于对标签下元素、文本等的引用。它的值有三种可能：如果当前组件没有子节点，它就是undefined；如果有一个子节点，数据类型是Object；如果有多个子节点，数据类型就是array。React提供一个工具方法React.Children来处理this.props.children。我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型是undefined还是object。如：

//其它组件对TPChildren的渲染引用
....
render() {
	return(
		<div className="red" onClick={this.clickHandle}>
			<TPChildren>
					<span>1</span>
					<span>2</span>
			</TPChildren>
		</div>
	);
}
....


// TPChildren组件
import React from 'react';
class TPChildren extends React.Component {
	constructor(props) {
		super(props);
		this.state = {};
	}

	render() {
		return(
			<div>
				<div id="child1">{this.props.children}</div> 
				<div id="child2"> 
					{
						React.Children.map(this.props.children, function(child) {
							return <div>{child}</div>;
						})
					} 
				</div>
			</div>
		);
	}
}

export default TPChildren;

渲染结果：

<div>
    <div id="child1">
        <span>1</span>
        <span>2</span>
    </div>
    
    <div id="child2">
        <div><span>1</span></div>
        <div><span>2</span></div>
    </div>
</div>

 

2.React.Fragment

React.Fragment表示空标签，等同于<></>，可以聚合一个子元素列表，并且不在DOM中增加额外节点。例如：

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}


class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

渲染结果：

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>