コンポーネントの隙間に装飾用のコンポーネントを差し込みたい

decoration.jsx

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

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

// HeadingDecoratorが必要とするpropsをbindしたいので、decoratorに匿名関数を渡している。
// しかし、これはreconciliationをぶちこわすような気がする(匿名関数(コンポーネント)のidがrender毎に変わるので)。
function f(props) {
  return <A decorator={() => <HeadingDecorator style={props.style}/>} />;
}