react插槽Protal

react新出的react.createProtal可以将子组件挂载到任意的dom元素下面，还可以通过子组件来修改父组件的状态，react.createProtal(child,container),child是任何可渲染的react子元素，container是任意的dom元素，下面就看看这个例子

//父组件class Head extends Component{constructor(props){super(props)this.state = {clicks: 0};this.handleClick = this.handleClick.bind(this);}handleClick(e) {console.log(e.target.innerText)this.setState(state => ({clicks: state.clicks + 1}));}render(){return( <div onClick={this.handleClick}><p>Number of clicks: {this.state.clicks}</p><Modal><Child /></Modal></div>)}
}

//Modal组件
class Modal extends Component{constructor(props){super(props)this.div=document.createElement('div');}componentDidMount(){document.body.appendChild(this.div)}componentWillUnmount(){document.body.removeChild(this.div)}render(){return ReactDOM.createPortal(this.props.children,this.div)}
}
//子组件
function Child(){return (<div className="modal"><button>Click</button></div>);
}

Modal组件主要是为子组件Child进行加工，这样Child组件就会挂载到Head组件的外面，但是Child组件仍可以通过点击改变父组件的数据，也可以向父组件传值。

react插槽Protal相关推荐

react 使用注意：
antd 国际标准化有时需要将组件默认为英文的部分,设置为中午呢,此时需要用到antd的国际标准化. //国际化标准import moment from 'moment';import 'momen ...
【React】看完这篇文章能够学会React初级技术
本文是根据链接这个视频系列的笔记做的学习记录整理,讲课风格很有趣(2倍速跟小甲鱼声音很像嘿嘿嘿) 在深入学习react之前建议先看看一些react的思想,相关文章我已经总结出来啦!半小时理解react ...
[react] 你有用过React的插槽(Portals)吗？怎么用？
[react] 你有用过React的插槽(Portals)吗?怎么用? 1.首先简单的介绍下react中的插槽(Portals),通过ReactDOM.createPortal(child, cont ...
[react] 举例说明React的插槽有哪些运用场景
[react] 举例说明React的插槽有哪些运用场景我觉得这里的插槽,指的应该是组合组件,而不是portal(传送门),因为对比vue中的插槽,只是父组件在子组件中间加入一系列的内容,然后子组件可 ...
react具名插槽与作用域插槽
// 插槽的使用,首先插槽是在组件标签内部组合的 JSX 内容,进行传递 // 因为 JSX 本身就是一个类 js 对象, 插槽直接使用 props.children 拿到了 JSX 直接渲染到 ...
React中实现插槽
React中实现插槽设计插槽在React中实现插槽需要我们自己来实现主要用到props.children 我们以跟组件作为父组件创建子组件DemoOne组件 import React from ...
React实现插槽（solt）
1.插槽的概念例如网站导航栏设置,不同的页面拥有不同的导航需求,但是导航结构都是相似的,都是三栏布局.我们不可能每一个页面设置一个组件来进行开发,这样组件的复用性太差,所以在此我们引入插槽.但是re ...
React中实现插槽效果的方案
文章目录 React实现插槽 children实现插槽 props实现插槽 React实现插槽在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的di ...
React学习笔记7：React使用注意事项
1. setState setState更新状态的2种写法方式一:setState(stateChange, [callback])------对象式的setState stateChange为状态 ...
【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...

react插槽Protal

react插槽Protal相关推荐

最新文章

热门文章