問題一覧に戻る
上級高度なパターンと型
問題90: レンダープロップス

コンポーネント間でコードを共有するレンダープロップスパターンを学びます。React要素を返す関数をpropとして渡します。これにより柔軟な合成とコード再利用が可能になります。関数はコンポーネントからデータを受け取り、どのようにレンダリングするかを決定します。より明示的なデータフローを持つHOCの代替手段です。

import React, { useState } from 'react';

{/* render propを持つコンポーネント */}
function Mouse({  }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  const handleMove = (e) => {
    setPos({ x: e.clientX, y: e.clientY });
  };

  return (
    <div onMouseMove={handleMove} style={{ height: '200px' }}>
      {/* render関数を呼び出し */}
      {(pos)}
    </div>
  );
}

function App() {
  return (
    {/* render関数を渡す */}
    <Mouse ={({ x, y }) => (
      <p>Mouse: {x}, {y}</p>
    )} />
  );
}

{/* 関数としてのchildren */}
function Cat() {
  return (
    <Mouse>
      {({ x, y }) => (
        <div style={{ position: 'absolute', left: x, top: y }}>
          🐱
        </div>
      )}
    </>
  );
}

export default App;