React ページ間で値を受け渡す方法は何ですか？

2年 ago
蓮, 翼
2 minutes

Reactには、ページ間で値を渡すために以下の方法を使用することができます。

  1. プロップスの使用：値を渡すために親コンポーネントでプロパティを定義し、子コンポーネントにそれを渡すことができます。子コンポーネントはprops属性を介して渡された値にアクセスできます。
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const value = 'Hello!';
  
  return (
    <ChildComponent value={value} />
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.value}</div>;
};

export default ChildComponent;
  1. 親コンポーネントでContextオブジェクトを作成し、値を渡す必要がある場所では、子コンポーネントをProviderコンポーネントでラップし、その後、子コンポーネントで値を取得するためにConsumerコンポーネントを使用します。
// ValueContext.js
import React from 'react';

const ValueContext = React.createContext();

export default ValueContext;

// ParentComponent.js
import React from 'react';
import ValueContext from './ValueContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const value = 'Hello!';
  
  return (
    <ValueContext.Provider value={value}>
      <ChildComponent />
    </ValueContext.Provider>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';
import ValueContext from './ValueContext';

const ChildComponent = () => {
  return (
    <ValueContext.Consumer>
      {value => <div>{value}</div>}
    </ValueContext.Consumer>
  );
};

export default ChildComponent;
  1. ページ間でルーティングされる場合、ルーティングパラメータを使用して値を渡すことができます。ルーティング定義でパラメータを指定し、props.match.paramsを使用してターゲットページでパラメータの値を取得できます。
// App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={ParentComponent} />
      <Route path="/child/:value" component={ChildComponent} />
    </Router>
  );
};

export default App;

// ParentComponent.js
import React from 'react';
import { Link } from 'react-router-dom';

const ParentComponent = () => {
  const value = 'Hello!';
  
  return (
    <div>
      <Link to={`/child/${value}`}>Go to Child Component</Link>
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  const value = props.match.params.value;
  
  return <div>{value}</div>;
};

export default ChildComponent;

Reactでよく使われるページ間で値を渡す方法について、具体的なニーズに合わせて選択することができます。

bannerAds