React native で配列を複数のクラスで使用する方法

React Nativeを最近触り出し、つまづいたので質問をさせていただきます。
知見をお持ちの方がいらっしゃいましたら、どうぞよろしくお願い致します。

実現したいこと：
配列を複数のComponentで使い回したいです。

現在「設定メニュー」なるものを作成しており、複数の画面で以下のコードを書いている状況です。
知人のエンジニアから、1箇所にまとめて処理を書いた方が良いという指摘を受けましたが、
処理の書き方が分からないため、教えていただけると嬉しいです。

また、menuListの要素数は全部で6つあるのですが、画面によっては5つしか使わない(最後の1つを使用しない)場合もあるので、最後の1つを表示しないことができるのであれば、その方法も教えていただけますと幸いです。

コードを抜粋しましたので、こちらを参考にしていただけますと幸いです。

個別ページに書いている内容

class 〇〇 extends Component {
  render() {
    const AUrl = '...';
    const BUrl = '...';
    const CUrl = '...';
    const DUrl = '...';
    const EUrl = '...';
    const logoutUrl = '...;

    var {width, height, scale} = Dimensions.get('window');
    const menuList = [
      {
        title: 'A',
        url: AUrl,
      },
      {
        title: 'B',
        url: BUrl,
      },
      {
        title: 'C',
        url: CUrl,
      },
      {
        title: 'D',
        url: DUrl,
      },
      {
        title: 'E',
        url: EUrl,
      },
      {
        title: 'ログアウト', ←表示されない場合もあります。
        url: logoutUrl,
      },
    ];
    return (
     <View style={styles.settingsMenu}>
      {menuList.map((data, index) => {
        return (
        );
      })}
     </View>
}

どうぞよろしくお願い致します！

行動規範の内容に同意します

回答2件

A,B,C,D,Eがそれぞれ固定なら、別のファイルで値を持ってexportして、使うときにimportすることで簡単に解決できます。

A,B,C,D,Eが状態によって異なる場合、簡単な順に

親コンポーネントを用意して、そのstateに持つ
Contextを使用する
React-Reduxを導入する

といった方法が考えられます。

投稿2020/10/29 03:09

Hogeike

総合スコア293

ベストアンサー

1箇所にまとめて処理を書いた方が良い

確かにその通りだと思います。
方法としては「親となるコンポーネントで値を持っておき、子のコンポーネントにpropsとして渡す」か「reduxを使ってstore上で管理しておく」のどちらかだと思います。
今回扱うデータがメニューデータなので、どんな画面でも使いまわせるようにreduxで管理する方がいいかなと思います。

構成が複雑になり、詳細を説明すると長くなるため割愛しますが、下記のような記事に目を通すと理解が捗るかもしれません。

Qiita | 世界一シンプルなReactNative + Reduxチュートリアル①

画面によっては5つしか使わない

画面側ではとりあえずメニュー全件を取得しておいて、filterあたりを使って絞り込むといいと思います。
※最後の要素だけ取り除きたいならpop()を使ってもいいです。

javascript
1const menuList = [
2  {
3    title: 'A',
4    url: AUrl,
5  },
6  {
7    title: 'B',
8    url: BUrl,
9  },
10  {
11    title: 'C',
12    url: CUrl,
13  },
14  {
15    title: 'D',
16    url: DUrl,
17  },
18  {
19    title: 'E',
20    url: EUrl,
21  },
22  {
23    title: 'ログアウト', ←表示されない場合もあります。
24    url: logoutUrl,
25  },
26];
27
28// menuListからtitleが"ログアウト"以外を抽出
29// 「ログアウト」というtitleが変わる可能性があるなら、一意のidのようなものをmenuに持たせてそちらを使うのも手です
30const filterdMenuList = menuList.filter((m) => m.title !== 'ログアウト');
31