前言：
昨天刚看了插槽，以为可以解决我工作中遇到的问题，非常激动，我今天又仔细想了想，发现并不能解决。。。 不过还是记录一下插槽吧，加深印象，嗯，就酱。
插槽作用：
插槽即：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的位置了。。。
呜呜呜。。。不忍了，哇哇哇！！！
随时随地看视频
