山本  洋介

山本 洋介

1634330100

JSON値をReactコンポーネントに渡す方法

Reactを始めたとき、共有データを使用するコンポーネントを備えたReactアプリの多くの例に出くわしたことでしょう。これらのコンポーネントは、複雑さの点で非常に単純であり、非常に理解しやすいものです。ただし、本番レベルのアプリで作業している場合、データはさまざまなソースやサービスからのものであることに気付くでしょう。

構築するコンポーネントがスケーラブルで保守可能であり、アプリにボトルネックが発生しないことが重要です。このガイドでは、JSONデータをコンポーネントに渡す方法を学習します。

小道具を使用して値を渡す

Reactコンポーネントは、小道具を介して他のコンポーネントからのデータにアクセスできます。小道具は、あるコンポーネントから別のコンポーネントにデータを送信するために使用されます。

以下の例では、Helloコンポーネントはname小道具を受け入れます。

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <Hello name="John" />
      </div>
    );
  }
}

const Hello = (props) => <h1>Hello {props.name}</h1>;

同様に、JSON値は小道具内で渡すことができます。

次の例を考えてみましょう。ここでは、ユーザーはAppコンポーネントの状態に設定され、user小道具としてコンポーネントに渡されAccountます。Accountコンポーネントが使用して値にアクセスすることができますprops.user

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: 12,
        firstName: "John",
        lastName: "Doe",
      },
    };
  }
  render() {
    return (
      <div>
        <Account user={this.state.user} />
      </div>
    );
  }
}

const Account = (props) => {
  const { user } = props; // same as -> const user = props.user;
  return (
    <div>
      <span>
        Name - {user.firstName} {user.lastName}
      </span>
      <span>ID - {user.id}</span>
    </div>
  );
};

通常、JSONデータはAPIやJSONファイルなどの外部ソースから取得されますが、ここでは簡単にするために状態から追加されます。JSONオブジェクトがどれほど複雑または大きい場合でも、小道具を使用して渡すことができます。Reactには、小道具のサイズに関する制限はありません。

イベントを使用して値を渡す

では、前のガイド、あなたはどんな共通の機能や特徴を共有していない独立したコンポーネント間でデータを渡すために、イベントバスを使用することができます方法を学びました。同様に、イベントバスを使用してJSONデータを渡すことができます。

以下に、イベントバスのコードを示します。これについては、前のガイドで詳しく説明しました。ここで要約すると、onメソッドはイベントをドキュメントオブジェクトにアタッチし、dispatchメソッドはいくつかのデータとともにremoveイベントを発生させ、メソッドはイベントをアタッチ解除してメモリリークを防ぐことができます。

const eventBus = {
  on(event, callback) {
    document.addEventListener(event, (e) => callback(e.detail));
  },
  dispatch(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  },
  remove(event, callback) {
    document.removeEventListener(event, callback);
  },
};

export default eventBus;

ここで、イベントバスを使用して、ライフサイクルメソッド内の状態からのデータuserDataとともにイベントをディスパッチusercomponentDidMount()ます。Account成分、を聞くuserDataイベント、イベントがトリガされたときに、状態のユーザデータを設定します。

ここで、前の例とは異なり、ユーザーデータを小道具としてAccountコンポーネントに渡す必要がなかったことがわかります。
 

import React, { Component } from "react";
import eventBus from "./eventBus";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: 12,
        firstName: "John",
        lastName: "Doe",
      },
    };
  }

  componentDidMount() {
    eventBus.dispatch("userData", this.state.user);
  }

  render() {
    return (
      <div>
        <Account />
      </div>
    );
  }
}

class Account extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
  }

  componentDidMount() {
    eventBus.on("userData", (user) => {
      this.setState({ user });
    });
  }

  render() {
    const { user } = this.state; // same as -> const user = props.user;
    return (
      <div>
        <span>
          Name - {user.firstName} {user.lastName}
        </span>
        <span>ID - {user.id}</span>
      </div>
    );
  }
}

結論

要約すると、小道具またはイベントバスを使用してJSONデータを他のコンポーネントに渡すことができます。どの方法を選択するかは、アプリの要件に基づいて決定することです。ただし、Reactがデータとコンポーネント間の通信を追跡できるように、小道具を使用することをお勧めします。場合によってはイベントバスを使用すると、予期しない結果が生じる可能性があります。したがって、イベントバスは、独立したコンポーネント間の相互作用の場合にのみ使用する必要があります。これがこのガイドからの説明です。次回まで、安全を確保し、コーディングを続けてください。

リンク: https://www.pluralsight.com/guides/how-to-pass-json-values-into-react-components

#reactjs 

What is GEEK

Buddha Community

JSON値をReactコンポーネントに渡す方法
山本  洋介

山本 洋介

1634330100

JSON値をReactコンポーネントに渡す方法

Reactを始めたとき、共有データを使用するコンポーネントを備えたReactアプリの多くの例に出くわしたことでしょう。これらのコンポーネントは、複雑さの点で非常に単純であり、非常に理解しやすいものです。ただし、本番レベルのアプリで作業している場合、データはさまざまなソースやサービスからのものであることに気付くでしょう。

構築するコンポーネントがスケーラブルで保守可能であり、アプリにボトルネックが発生しないことが重要です。このガイドでは、JSONデータをコンポーネントに渡す方法を学習します。

小道具を使用して値を渡す

Reactコンポーネントは、小道具を介して他のコンポーネントからのデータにアクセスできます。小道具は、あるコンポーネントから別のコンポーネントにデータを送信するために使用されます。

以下の例では、Helloコンポーネントはname小道具を受け入れます。

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <Hello name="John" />
      </div>
    );
  }
}

const Hello = (props) => <h1>Hello {props.name}</h1>;

同様に、JSON値は小道具内で渡すことができます。

次の例を考えてみましょう。ここでは、ユーザーはAppコンポーネントの状態に設定され、user小道具としてコンポーネントに渡されAccountます。Accountコンポーネントが使用して値にアクセスすることができますprops.user

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: 12,
        firstName: "John",
        lastName: "Doe",
      },
    };
  }
  render() {
    return (
      <div>
        <Account user={this.state.user} />
      </div>
    );
  }
}

const Account = (props) => {
  const { user } = props; // same as -> const user = props.user;
  return (
    <div>
      <span>
        Name - {user.firstName} {user.lastName}
      </span>
      <span>ID - {user.id}</span>
    </div>
  );
};

通常、JSONデータはAPIやJSONファイルなどの外部ソースから取得されますが、ここでは簡単にするために状態から追加されます。JSONオブジェクトがどれほど複雑または大きい場合でも、小道具を使用して渡すことができます。Reactには、小道具のサイズに関する制限はありません。

イベントを使用して値を渡す

では、前のガイド、あなたはどんな共通の機能や特徴を共有していない独立したコンポーネント間でデータを渡すために、イベントバスを使用することができます方法を学びました。同様に、イベントバスを使用してJSONデータを渡すことができます。

以下に、イベントバスのコードを示します。これについては、前のガイドで詳しく説明しました。ここで要約すると、onメソッドはイベントをドキュメントオブジェクトにアタッチし、dispatchメソッドはいくつかのデータとともにremoveイベントを発生させ、メソッドはイベントをアタッチ解除してメモリリークを防ぐことができます。

const eventBus = {
  on(event, callback) {
    document.addEventListener(event, (e) => callback(e.detail));
  },
  dispatch(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  },
  remove(event, callback) {
    document.removeEventListener(event, callback);
  },
};

export default eventBus;

ここで、イベントバスを使用して、ライフサイクルメソッド内の状態からのデータuserDataとともにイベントをディスパッチusercomponentDidMount()ます。Account成分、を聞くuserDataイベント、イベントがトリガされたときに、状態のユーザデータを設定します。

ここで、前の例とは異なり、ユーザーデータを小道具としてAccountコンポーネントに渡す必要がなかったことがわかります。
 

import React, { Component } from "react";
import eventBus from "./eventBus";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: 12,
        firstName: "John",
        lastName: "Doe",
      },
    };
  }

  componentDidMount() {
    eventBus.dispatch("userData", this.state.user);
  }

  render() {
    return (
      <div>
        <Account />
      </div>
    );
  }
}

class Account extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
  }

  componentDidMount() {
    eventBus.on("userData", (user) => {
      this.setState({ user });
    });
  }

  render() {
    const { user } = this.state; // same as -> const user = props.user;
    return (
      <div>
        <span>
          Name - {user.firstName} {user.lastName}
        </span>
        <span>ID - {user.id}</span>
      </div>
    );
  }
}

結論

要約すると、小道具またはイベントバスを使用してJSONデータを他のコンポーネントに渡すことができます。どの方法を選択するかは、アプリの要件に基づいて決定することです。ただし、Reactがデータとコンポーネント間の通信を追跡できるように、小道具を使用することをお勧めします。場合によってはイベントバスを使用すると、予期しない結果が生じる可能性があります。したがって、イベントバスは、独立したコンポーネント間の相互作用の場合にのみ使用する必要があります。これがこのガイドからの説明です。次回まで、安全を確保し、コーディングを続けてください。

リンク: https://www.pluralsight.com/guides/how-to-pass-json-values-into-react-components

#reactjs