react的嵌套组件
react没有vue插槽的概念,但是有嵌套组件,可以用嵌套组件实现类似插槽的功能。下例中,color,name,btn相当于具名插槽,children相当于匿名插槽。
import React from 'react';
import { Button } from 'antd'; //props接受参数,props.children代表上级组件所有没有命名的东西
function Dialog(props) {
return (
<div style={{ border: `1px solid ${props.color || 'red'}` }}>
{props.children}
{props.name}
{props.btn}
</div>
)
}
//WelcomeDialog里嵌套Dialog,并传值name,color,btn
function WelcomeDialog() {
const btn = <button>按钮</button>
return (
<Dialog name="lizhao" color="green" btn={btn}>
<h1>welcome title</h1>
<p>welcome content</p>
</Dialog>
)
} class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<WelcomeDialog />
</div>
)
}
}
export default App;
react的嵌套组件的更多相关文章
- React中嵌套组件与被嵌套组件的通信
前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- React高阶组件学习笔记
高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...
- react功能实现-组件创建
这里主要从两个角度来分析创建一个组件需要怎么做,一个是元素,一个是数据.整理向,大量借鉴,非原创. 1.渲染组件. 我们先明确一点,所有的元素都必须通过render方法来输出渲染.所有,每个组件类最终 ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
随机推荐
- 删除Linux系统多余的引导
问题: 电脑中安装了多个Linux系统,需要删除不用的Linux系统的引导 解决方法: open terminal: su - 切换root用户 cd /boot/ ls ... grub ...
- Notepad++格式化xml(转)
转自:http://www.herongyang.com/XML/NPP-XML-Tools-Plugin-Download-and-Install.html Downloading and inst ...
- psql物化视图自动更新
更新物化视图示例 CREATE TABLE model.test ( id SERIAL PRIMARY KEY, name VARCHAR(60)); . 创建物化视图 CREATE MATERIA ...
- centos-Hadoop集群 安装同步时间
1.安装 yum search cache ntpdate xcall.sh "yum install -y ntpdate.x86_64" 2.同步 xcall.sh " ...
- SpringCloud(2)----SpringCloud理解篇
一.微服务概述 1.什么是微服务 目前的微服务并没有一个统一的标准,一般是以业务来划分将传统的一站式应用,拆分成一个个的服务,彻底去耦合,一个微服务就是单功能业务,只做一件事. 与微服务相对的叫巨石 ...
- 基于eclipse的java与mysql开发环境的搭建
本文主要介绍 Java与MySQL的连接 1.安装jdk 略~ 园子里有很多 2.安装mysql 略~ 3.下载并安装JDBC,通过mysql官网下载 http://dev.mysql.com/d ...
- 约束布局ConstraintLayout详解
约束布局ConstraintLayout详解 转 https://www.jianshu.com/p/17ec9bd6ca8a 目录 1.介绍 2.为什么要用ConstraintLayout 3.如何 ...
- js实现动态显示时间
思路: *得到当前时间 var date = new Date(); //格式化为本地时间 var d1 = date.toLocaleString(); *使页面每秒显示一次时间 setInterv ...
- 史上最全最详细JNDI数据源配置说明
转: 史上最全最详细JNDI数据源配置说明 2017年08月05日 17:12:08 万米高空 阅读数 23983 版权声明:本文为博主原创文章,转载请注明出处,尊重劳动成果,谢谢~ https: ...
- maven 依赖原则
maven 依赖原则 ###间接依赖路径最短优先 a->b->c1.0 a->e->f->c1.1 ====>c1.0 申明顺序优先 <!-- test1 - ...