react系列（18）小技巧

Bertha 。 2021-09-16 23:36 461阅读 0赞

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

渲染结果：

# 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>