react 插槽

ゞ浴缸里的玫瑰 2021-07-24 21:38 388阅读 0赞

插槽
    
    子组件中的内容,会被放进this.props.children这个数组里
    
    	1、在父组件标签中的子组件B添加内容
    		<B>xx</B>
    	2、设置插槽内容在子组件显示
    		{this.props.children}
    
    	3、子组件获取插槽内容中标签上的参数
    		因为内容按数组放置
    		{this.props.children[索引].props['data-xx']}
    
    	4、可通过对this.props.children的循环,来进行内容、参数处理
    
    遍历插槽内的子元素并获取标签上的属性
    
    	React.Children.map(this.props.children,(ele,index)=>{
    		ele.props.键名获取插槽内容的标签属性
    		return  xx
    	})

代码示例:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import './1.css'
    { /*https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list?t=1582528861997 https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=1582514346850*/}
    
    class A extends React.Component{ 
    	constructor(props)
    	{ 
    		super(props);
    		console.log(props);
    	}
    	render()
    	{ 
    		return(
    			<div>hh
    				<As>
    					<h1 data-po='top'>哈哈1</h1>
    					<h1 data-po='main'>哈哈2</h1>
    					<h1 data-po='footer'>哈哈3</h1>
    				</As>
    			</div>
    		)
    	}
    }
    //子组件
    class As extends React.Component{ 
    	constructor(props)
    	{ 
    		super(props);
    		console.log(props);
    	}
    	render()
    	{ 
    	//循环获取各个子组件外加参数获取
    		let one,two,thre;
    		this.props.children.forEach(function(item,index){ 
    			if(item.props['data-po']=='top')
    			{ 
    				one=item;
    			}else if(item.props['data-po']=='main')
    			{ 
    				two=item;
    			}else{ 
    				thre=item;
    			}
    		})
    
    		return(
    			<div>
    				A的子组件
    				//获得插槽内容中第一个标签的传入参数
    				{ this.props.children[0].props['data-po']}
    				//将获得的各个插槽内容,分别显示
    				<div className='top'>
    					one
    				</div>
    				<div className='main'>
    					two
    				</div>
    				<div className='footer'>
    					thre
    				</div>
    
    
    			</div>
    		)
    	}
    }
    
    
    
    ReactDOM.render(<A/>, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();