decoration.jsx

// Aはpropsで装飾用のコンポーネントを受け取りたい
// ただし、装飾用のコンポーネントが必要とするpropsについては関知したくない
function A(props) {
  const Decorator = props.decorator;
  return (
    <div>
      <Decorator {...props.decoratorProps}>TEST</Decorator>
    </div>
  );
}

// styleを受け取っているのは、ただの例で、これといった意味はない
function HeadingDecorator(props) {
  return <h1 style={props.style}>{props.children}</h1>;
}

function f(props) {
  return <A decorator={HeadingDecorator} decoratorProps={{style: props.style}/>}} />;
}