Cổng phản ứng

Tìm hiểu cách sử dụng React Portals

React 16, được phát hành vào tháng 9 năm 2017, đã giới thiệu Portals.

Cổng thông tin là một cách để hiển thị một phần tử bên ngoài cấu trúc phân cấp thành phần của nó, trong một thành phần riêng biệt.

Khi sự kiện đó được hiển thị, các sự kiện xảy ra trên đó được quản lý bởi hệ thống phân cấp các thành phần React chứ không phải bởi hệ thống phân cấp được đặt bởi vị trí DOM của phần tử.

Do đó có tên là “cổng thông tin”: một phần tử nằm ở đâu đó trong cây DOM nằm ngoài cây thành phần React bình thường, nhưng cây thành phần React bao gồm nó vẫn chịu trách nhiệm.

React cung cấp một API dễ dàng để thực hiện việc này,ReactDOM.createPortal(), chấp nhận 2 đối số. Đầu tiên là phần tử để hiển thị, thứ hai là phần tử DOM để hiển thị nó.

Một trường hợp sử dụng cổ điển cho điều này là cửa sổ phương thức.

Phương thức hiển thị ở chế độ toàn màn hình phải nằm bên ngoài phần tử, vì vậy nó có thể được tạo kiểu phù hợp bằng cách sử dụng CSS.

Vì vậy, nếu một phương thức được định nghĩa là một thành phần:

class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }

componentDidMount() { document.getElementById(‘modal’).appendChild(this.el) }

componentWillUnmount() { document.getElementById(‘modal’).removeChild(this.el) }

render() { return ReactDOM.createPortal( this.props.children, this.el ) } }

Chúng tôi có thể có một thành phần Ứng dụng hiển thị nó và tất cả các sự kiện xảy ra trong thành phần Phương thức sẽ được Ứng dụng xử lý mặc dù về mặt kỹ thuật, phương thức được hiển thị trong một cây DOM khác:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {showModal: false}
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleHide</span>.<span style="color:#a6e22e">bind</span>(<span style="color:#66d9ef">this</span>)

}

handleShow() { this.setState({showModal: true}) }

handleHide() { this.setState({showModal: false}) }

render() { const modal = this.state.showModal ? ( <Modal> <div> The modal <button onClick={this.handleHide}>Hide</button> </div> </Modal> ) : ‘’

<span style="color:#66d9ef">return</span> (
  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
    <span style="color:#a6e22e">The</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">handleShow</span>}<span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Show</span> <span style="color:#a6e22e">modal</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
    {<span style="color:#a6e22e">modal</span>}
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
)

} }

ReactDOM.render(<App />, document.getElementById(‘app’))

Xem ví dụ đầy đủ trênhttps://codepen.io/flaviocopes/pen/KbdagX

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: