1. ホーム
  2. ジャバスクリプト

[解決済み】あるリアクトコンポーネントを別のリアクトコンポーネントに渡して、最初のコンポーネントの内容をトランスクルードする方法は?

2022-04-03 12:14:19

質問

あるコンポーネントを別のリアクトコンポーネントに渡す方法はありますか? モデルのリアクトコンポーネントを作成し、その内容を転記するために別のリアクトコンポーネントを渡したいのです。

編集:以下は、私がやろうとしていることを示すreactJSのコードペンです。 http://codepen.io/aallbrig/pen/bEhjo

HTML

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

リアクトJS

/**@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>