あるコンポーネントを別の反応コンポーネントに渡す方法はありますか？そのコンテンツをトランスクルージョンするために、モデルの反応コンポーネントを作成し、別の反応コンポーネントを渡したいのですが。

編集：これは私がやろうとしていることを説明するreactJS codepenです。http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

を使用this.props.childrenして、コンポーネントに含まれるすべての子をレンダリングできます。

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

私は、より詳細な答えを提供する注意ここに

ランタイムラッパー：

これは最も慣用的な方法です。

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

注children「特別な小道具」リアクトに、上記の例では、糖衣構文であるとする（ほとんど）と等価です<Wrapper children={<App/>}/>

初期化ラッパー/ HOC

高次コンポーネント（HOC）を使用できます。最近、公式ドキュメントに追加されました。

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

これにより、ラッパーコンポーネントがshouldComponentUpdateを使用してレンダリングを1ステップ先に短絡できるため、パフォーマンスが（少し）向上する可能性がありますが、ランタイムラッパーの場合、子プロップは常に異なるReactElementであり、再レンダリングを引き起こす可能性があります。コンポーネントがPureComponentを拡張する場合でも。

ことに注意してくださいconnect再来の実行時のラッパーにするために使用が、それはあなたが使用している場合は役に立たないレンダリングし再避けるためにできるので、HOCに変更されましたpure（デフォルトでtrueである）オプションを

Reactコンポーネントの作成はコストがかかる可能性があるため、レンダリングフェーズ中にHOCを呼び出さないでください。初期化時にこれらのラッパーを呼び出す必要があります。

上記のような機能コンポーネントを使用する場合、ステートレス機能コンポーネントは実装されないため、HOCバージョンは有用な最適化を提供しないことに注意してください shouldComponentUpdate

ここでの詳細な説明：https : //stackoverflow.com/a/31564812/82609

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Facebookはステートレスコンポーネントの使用を推奨していますソース：https : //facebook.github.io/react/docs/reusable-components.html

理想的には、ほとんどのコンポーネントはステートレス関数です。将来的には、不要なチェックやメモリ割り当てを回避することにより、これらのコンポーネントに固有のパフォーマンス最適化も行えるようになるからです。可能であれば、これが推奨パターンです。

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

通常の小道具として渡すことができます。 foo={<ComponentOne />}

例えば：

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

私はReact組み込みAPIを使用することを好みます：

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

その後、ラッパーdivを必要なものに置き換えることができます。

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

あなたは経由でコンポーネントを渡すことができます。小道具と補間でレンダリングします。

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

次に、Reactコンポーネントとなるprop呼び出されたを渡しchildます。

ゲームの終盤ですが、コンポーネントを小道具として提供してコンポーネントをオーバーライドする強力なHOCパターンを次に示します。シンプルでエレガントです。

仮定MyComponent架空のレンダリングAコンポーネントをしかし、あなたはのカスタムオーバーライドを可能にするA、この例ではB、ラップされAに<div>...</div>しても、追加「！」テキストの小道具に：

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

実際、あなたの質問は、高次コンポーネント（HOC）の書き方です。HOCを使用する主な目的は、コピー貼り付けを防ぐことです。HOCを純粋に機能的なコンポーネントとして、またはクラスとして記述できます。ここに例を示します。

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

親コンポーネントをクラスベースのコンポーネントとして記述したい場合：

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

親を機能コンポーネントとして記述したい場合：

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

親リストの反応コンポーネントの例と、whosプロップに反応要素が含まれています。この場合、単一のLink反応コンポーネントが渡されます（domレンダーで見られるように）。

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);

はい、propsを使用してコンポーネントのデータをpropsのようなオブジェクトとして渡し、コンポーネント内で別のコンポーネントをインポートして動的にprppsデータにバインドできます。 反応コンポーネントの詳細を読む