React Native で要素を状態で表示および非表示にする方法

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

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

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

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

1. MyComponent などの新しい React コンポーネントを作成します。
2. コンポーネントの render メソッドで、表示または非表示にする要素をレンダリングし、次を使用します。条件付きレンダリングを使用して、要素を表示するかどうかを決定します。
3. コンポーネントのコンストラクター メソッドで、showElement などの新しい状態変数を作成し、それを false に設定します。
4. Add可視性の変更をトリガーする要素への onClick イベント ハンドラー。イベント ハンドラーで、showElement 状態変数を切り替えます。
5. 要素を条件付きでレンダリングするには、render メソッドで showElement 状態変数を使用します。 showElement が true の場合、要素は表示されます。 showElement が false の場合、要素は非表示になります。

これを実装する方法の例を次に示します。

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

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

  render() {
    return (
      <div>
        {this.state.showElement && <div>Hello World!</div>}
        <button onClick={this.toggleShowElement}>Toggle</button>
      </div>
    );
  }
}</code>

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

以上がReact Native で要素を状態で表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。