React Native を使用した要素の表示と非表示

React では、ページ上の要素の表示/非表示を操作する方法がいくつか提供されています。一般的なアプローチは、インライン スタイルを使用して表示プロパティを設定することです。ただし、この方法にはインライン スタイルが必要であり、不便でコードが読みにくくなる可能性があります。

より洗練された解決策は、React State API を使用することです。 State API を使用すると、React コンポーネント内でデータを定義および管理できます。コンポーネントの状態を変更すると、再レンダリングをトリガーでき、新しい状態に基づいて UI が更新されます。

次の方法で、クリック イベントを使用してページ上の要素を表示または非表示にすることができます。 React State API:

1. MyComponent などの新しい React コンポーネントを作成します。
2. コンポーネントの render メソッドで、必要な要素をレンダリングします。
3. コンポーネントのコンストラクター メソッドで、showElement などの新しい状態変数を作成し、それを false に設定します。
4. 可視性の変更をトリガーする要素に onClick イベント ハンドラーを追加します。イベント ハンドラーで、showElement 状態変数を切り替えます。
5. 要素を条件付きでレンダリングするには、render メソッドで 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
      
    );
  }
}

このコード スニペットは、テキスト「Hello World!」を含む div をレンダリングする MyComponent という新しい React コンポーネントを作成します。 showElement 状態変数が true の場合。 「Hello World!」の表示/非表示を切り替えるボタンも含まれています。要素。