使用 React Native 顯示和隱藏元素

React 提供了多種方法來操縱頁面上元素的可見性。常見的方法是使用內聯樣式來設定顯示屬性。然而，這種方法需要內聯樣式，這可能會很不方便，並且會降低程式碼的可讀性。

更優雅的解決方案是使用 React State API。 State API 可讓您定義和管理 React 元件中的資料。透過變更元件的狀態，您可以觸發重新渲染，這將根據新狀態更新 UI。

以下是如何透過點擊事件顯示或隱藏頁面上的元素，使用React State API：

1. 來建立新的React元件，例如MyComponent。
2. 在元件的render方法中，渲染要顯示或隱藏的元素，並使用條件渲染來確定元素是否可見。
3. 在元件的建構子方法中，建立一個新的狀態變量，例如 showElement，並將其設為 false。
4. 將 onClick 事件處理程序新增至觸發可見性變更的元素。在事件處理程序中，切換 showElement 狀態變數。
5. 在渲染方法中使用 showElement 狀態變數有條件地渲染元素。如果 showElement 為 true，則該元素將可見。如果 showElement 為 false，則該元素將被隱藏。

以下是如何實現此功能的範例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

此程式碼片段建立一個名為 MyComponent 的新 React 元件，該元件呈現一個帶有文字「Hello World!」的 div當 showElement 狀態變數為 true 時。它還包括一個按鈕，用於切換“Hello World!”的可見性。元素。