8 Reactjs 插槽

Dear 丶 2023-02-27 12:06 2阅读 0赞

Portals 提供了一种很好的方法，将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点。

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素。第二个参数（container）则是一个 DOM 元素。

**用法**

当你从组件的 render 方法返回一个元素时，它将被装载到父节点 DOM 中：

render() \{

// React 装载一个新的 div，并将 children 渲染到这个 div 中

return (

<div>

\{this.props.children\}

</div>

);

然而，有时候将子元素插入到 DOM 节点的其他位置会有用的：

render() \{

// React 不会创建一个新的 div。 它把 children 渲染到 \`domNode\` 中。

// \`domNode\` 可以是任何有效的 DOM 节点，不管它在 DOM 中的位置。

return ReactDOM.createPortal(

this.props.children,

domNode,

);

**通过 Portals 进行事件冒泡**

一个从 portal 内部会触发的事件会一直冒泡至包含 *React tree* 的祖先。

意思是：

B组件作为A组件的子组件，虽然B没有直接挂在A的Dom下面，但B的事件冒泡还是会冒泡到A

假设如下 HTML 结构：

// These two containers are siblings in the DOM

const appRoot = document.getElementById('app-root');

const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component \{

constructor(props) \{

super(props);

this.el = document.createElement('div');

componentDidMount() \{

modalRoot.appendChild(this.el);

componentWillUnmount() \{

modalRoot.removeChild(this.el);

render() \{

return ReactDOM.createPortal(

this.props.children,

this.el,

);

class Parent extends React.Component \{

constructor(props) \{

super(props);

this.state = \{clicks: 0\};

this.handleClick = this.handleClick.bind(this);

handleClick() \{

// This will fire when the button in Child is clicked,

// updating Parent's state, even though button

// is not direct descendant in the DOM.

this.setState(prevState => (\{

clicks: prevState.clicks + 1

\}));

render() \{

return (

<div onClick=\{this.handleClick\}>

<p>Number of clicks: \{this.state.clicks\}</p>

<p>

Open up the browser DevTools

to observe that the button

is not a child of the div

with the onClick handler.

</p>

<Modal>

</Modal>

</div>

);

function Child() \{

// The click event on this button will bubble up to parent,

// because there is no 'onClick' attribute defined

return (

<button>Click</button>

</div>

);

ReactDOM.render(<Parent />, appRoot);

8 Reactjs 插槽

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue插槽、具名插槽和作用域插槽

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

相关【vue2第十四章】插槽(普通插槽、具名插槽、作用域插槽语法)

相关 VUE之solt插槽（匿名插槽，具名插槽，作用作用域插槽）

相关 8 Reactjs 插槽

相关【Vue】 slot插槽、具名插槽和作用域插槽

相关 vue 插槽有名插槽

相关 SIC插槽，WSIC插槽，XSIC插槽

相关在Vue中使用插槽插槽和具名插槽/作用域插槽

相关 Vue插槽详解 | 什么是插槽？