React: Cách hiển thị một thành phần khác khi nhấp chuột

Chuyển đổi chế độ hiển thị của các thành phần bằng cách yêu cầu React hiển thị một thành phần khác khi bạn nhấp vào thứ gì đó

Trong nhiều trường hợp, bạn muốn hiển thị một thành phần hoàn toàn khác bên trong màn hình, khi một nút hoặc liên kết được nhấp vào.

Ví dụ, hãy nghĩ về một cấu trúc điều hướng.

Làm thế nào bạn có thể làm như vậy?

Trong ví dụ này, tôi đang quản lý trạng thái tập trung trong thành phần Ứng dụng.

import React from 'react'

const AddTripButton = (props) => { return <button onClick={props.addTrip}>Add a trip</button> }

export default AddTripButton

Sau đó, trong thành phần Ứng dụng, xử lý sự kiện addTrip bằng cách gán cho nótriggerAddTripStatephương pháp:

<AddTripButton addTrip={this.triggerAddTripState} />

Với các hook React, trước tiên hãy nhập useState:

import { useState } from 'react'

sau đó khai báo một biến "trạng thái":

const [state, setState] = useState('start')

Trong JSX, bạn hiển thị và ẩn các thành phần khác nhau dựa trên giá trị trạng thái này:

function App() {
  const [state, setState] = useState('start')

triggerAddTripState = () => { setState(‘add-trip’) }

return ( <div> {state === ‘start’ && ( <AddTripButton addTrip={this.triggerAddTripState} /> )}

  {<span style="color:#a6e22e">state</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">'add-trip'</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/&gt;</span>}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

) }

Với các thành phần dựa trên lớp, trongtriggerAddTripStatebạn chỉnh sửa trạng thái của thành phần:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { isEmptyState: true }
  }

triggerAddTripState = () => { this.setState({ …this.state, isEmptyState: false, isAddTripState: true }) } }

Hãy xem, ở đây tôi tạo một trạng thái mặc định, chứaisEmptyState: true. Khi màtriggerAddTripStatephương thức được chạy, trạng thái được chỉnh sửa để thuộc tính được đặt thành false vàisAddTripStatethuộc tính được đặt thành true.

Bây giờ trong JSX, chúng ta có thể sử dụng 2 thuộc tính trạng thái đó để hiển thị và ẩn các phần của thành phần bằng cách sử dụng cú pháp sau:

render() {
  return (
    <div>
      {this.state.isEmptyState && <AddTripButton addTrip={this.triggerAddTripState} />}
  {<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">isAddTripState</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/&gt;</span>}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

) }

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: