码迷,mamicode.com
首页 > 其他好文 > 详细

公共组件的抽取-page-title

时间:2018-09-24 18:30:42      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:class   turn   asc   开发   from   import   img   遇到   pre   

我们在开发的时候,难免遇到公共组件的开发,这时为了复用,可以开发一个公共的模块,那么react怎么开发公共组件呢?

需求:

开发公共的page-title组件

1.静态模版先写好(html+css)

  <div classname="row"> 
   <div classname="col-md-12"> 
    <h1 classname="page-title">首页</h1> 
   </div> 
  </div>

2.抽离+动态传属性

1-父组件引入,渲染,传值

import React from ‘react‘;
import ‘./index.css‘;

import PageTitle from ‘component/page-title/index.jsx‘;

class Home extends React.Component {
	render(){
		return (
			<div id=‘page-wrapper‘>
				<PageTitle title=‘首页123‘/>
			</div>
		)
	}
}
export default Home;

3.子组件接收值

  <div classname="row"> 
   <div classname="col-md-12"> 
    <h1 classname="page-title">{this.props.title}</h1> 
    {this.props.children} //作为容器式接收剩余部分,类似vue插槽
   </div> 
  </div>

4.显示

技术分享图片

 

  

 

 

公共组件的抽取-page-title

标签:class   turn   asc   开发   from   import   img   遇到   pre   

原文地址:https://www.cnblogs.com/ipoodle/p/9696066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!