利来官网利来官网


利来w66娱乐游戏

react 插槽(Portals)

前言:

昨天刚看了插槽,以为可以解决我工作中遇到的问题,非常激动,我今天又仔细想了想,发现并不能解决。。。 不过还是记录一下插槽吧,加深印象,嗯,就酱。

插槽作用:

插槽即:ReactDOM.createPortal(child, container) ,由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 片段(fragment)。第二个参数(container)则是一个 DOM 元素。

应用场景:

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式,但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如,对话框、hovercards以及提示框。所以一般react组件里的模态框,就是这样实现的~

特点:事件冒泡

事件冒泡和普通react子节点一样,是因为portal仍然存在于React tree中,而不用考虑其在真是DOM tree中的位置。嗯,这个特性很方便。

 

代码就上一些文档中的例子吧。。。

// These two containers are siblings in the DOMconst appRoot = document.getElementById("app-root");const modalRoot = document.getElementById("modal-root");// Let"s create a Modal component that is an abstraction around// the portal API.class Modal extends React.Component { constructor(props) { super(props); // Create a div that we"ll render the modal into. Because each // Modal component has its own element, we can render multiple // modal components into the modal container. this.el = document.createElement("div"); } componentDidMount() { // Append the element into the DOM on mount. We"ll render // into the modal container element (see the HTML tab). modalRoot.appendChild(this.el); } componentWillUnmount() { // Remove the element from the DOM when we unmount modalRoot.removeChild(this.el); } render() { // Use a portal to render the children into the element return ReactDOM.createPortal( // Any valid React child: JSX, strings, arrays, etc. this.props.children, // A DOM element this.el, ); }}// The Modal component is a normal React component, so we can// render it wherever we like without needing to know that it"s// implemented with portals.class App extends React.Component { constructor(props) { super(props); this.state = {showModal: false}; this.handleShow = this.handleShow.bind(this); this.handleHide = this.handleHide.bind(this); } handleShow() { this.setState({showModal: true}); } handleHide() { this.setState({showModal: false}); } render() { // Show a Modal on click. // (In a real app, don"t forget to use ARIA attributes // for accessibility!) const modal = this.state.showModal ? ( <Modal> <div className="modal"> <div> With a portal, we can render content into a different part of the DOM, as if it were any other React child. </div> This is being rendered inside the #modal-container div. <button onClick={this.handleHide}>Hide modal</button> </div> </Modal> ) : null; return ( <div className="app"> This div has overflow: hidden. <button onClick={this.handleShow}>Show modal</button> {modal} </div> ); }}ReactDOM.render(<App />, appRoot);

可以看到官例: 先写了一个Modal组件,显示Modal的props.children,在新建的插槽中。

本文到这里就结束了!

最后随手 讲一下我为什么昨天觉得可以解决我的问题,

我遇到的问题是:有一个容器,设置了overflow属性;容器里面一个一个的li,也就是列表;每一条的列表后面都有一个icon,悬浮会显示一些额外信息。问题就是,由于外面设置了overflow,导致icon显示的信息,在靠近上下左右等位置  就就就显示不出来了!!!哎,心塞塞啊~~ 本来以为这个插槽可以解决,可是,问题又来了,我插入到overflow 容器外面后,我就无法定位每一条的后面icon的位置了。。。

呜呜呜。。。不忍了,哇哇哇!!!

 

, 1, 0, 9);

欢迎阅读本文章: 于先生

w66利来官网地址

sungame988