他のコンポーネントが反応してレンダリングしても、DOM本体のコンポーネントをどのようにレンダリングできますか？

私はとDOM本体でレンダリングされるコンポーネント、たとえばXを持っています。私はコンポーネントXによってレンダリングされる別のコンポーネントYを持っていますが、コンポーネントYはフルスクリーンで開く必要があります。だから、Xをレンダリングしても、コンポーネントXではなく、document.bodyにレンダリングする必要があります。他のコンポーネントが反応してレンダリングしても、DOM本体のコンポーネントをどのようにレンダリングできますか？

app 
    -X 
     -Y (in Full Screen)

構造は、今のようになります：

<body> 
    <div class="X"> 
     <div class="Y"> 
     </div> 
    </div> 
</body>

とレンダリングの流れは次のようになります。

app.body 
    -X 
-Y

とDOM構造はず

は、コンポーネント構造があるリアクトbe：

<body> 
    <div class="X"> 
    </div> 
    <div class="Y"> 
    </div> 
</body>

どうすればいいですか？また、私は反応成分を作るためにES6クラスを使用しています。

出典

2016-08-24 Ajay Gaur

をUPDATE：からスタートは16反応し、正式なサポートはありportalsの場合

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

私はそれがAPI反応し、文書化されていないを使用しているとして、このソリューションを使用することをお勧めしません。

class Portal extends React.Component { 
 
    componentDidUpdate() { 
 
    this._renderLayer(); 
 
    } 
 
    
 
    componentDidMount() { 
 
    this._renderLayer(); 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    ReactDOM.unmountComponentAtNode(document.getElementById(this.props.container)); 
 
    } 
 

 
    _renderLayer() { 
 
    ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, document.getElementById(this.props.container)); 
 
    } 
 
    render() { 
 
    return null; 
 
    } 
 
} 
 

 
class Y extends React.Component { 
 
    render() { 
 
    return <div>Y</div>; 
 
    } 
 
} 
 

 
class X extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     X 
 
     <Portal container="Y"> 
 
      <Y /> 
 
     </Portal> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<X/>, document.getElementById('X'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='X'></div> 
 
<div id='Y'></div>

出典

2016-08-24 13:33:44

こんにちは、私は 'portal'をこの問題に使用しています。コンテナでは' container = {（）=> document.querySelector（ 'body'）} 'を送信していて、それにエラー： ' Reactを返します。 createElement：typeは、null、未定義、ブール値、または数値であってはなりません。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。レンダリングメソッドを確認する ' –

こんにちは、それは働いた。ありがとう。私は間違った 'import'文を書いていました –

危険な' ReactDOM.unstable_renderSubtreeIntoContainer（） 'の代わりに普通の' React.render（） 'を使うことができます。 –

単に自分の<div>であなたのコンポーネントの各レンダリング：

<body> 
    <div id="app"></div> 
    <div id="Y"></div> 
</body>

そして、各コンポーネントを個別にレンダリング：

React.render(ComponentApp, document.getElementById("app")); 
React.render(ComponentX, document.getElementById("X"));

出典

2016-08-24 12:39:32 Vad

が、 'X'はY' 'によってレンダリングされます。免責て、ここにあります。私はDOMの構造がこのように見えるはずだが、どうすればいいのだろうか？ –

反応コンポーネントのES6クラスを使用しているので、どうすればそれを書くことができますか？あなたはどうか教えてください –

あなたの状況を表現する方法に基づいて、論理的に階層に収まらないので、 'Y'に' X'を表示してはいけません。 'Y'が' X'に依存するデータはありますか？もしそうなら、あなたはそれを何か他の方法で得ることができますか（例えば、reduxのような集中型店舗）？ – taylorc93

他のコンポーネントが反応してレンダリングしても、DOM本体のコンポーネントをどのようにレンダリングできますか？

答えて

関連する問題