React - 別のDOMコンテナに子を持つ親コンポーネント

異なるDOMオブジェクトにマウントされる子コンポーネントを持つコンポーネントを持つことは可能ですか？React - 別のDOMコンテナに子を持つ親コンポーネント

私はarchieveをしたいかを説明するためにいくつかの擬似コード：

import ChildComponent1 from './Components/ChildComponent1'; 
import ChildComponent2 from './Components/ChildComponent2'; 

var MyParentComponent = React.createClass({ 
    render: function() { 
    <ChildComponent1 />, 
    document.querySelector('#component-1') 

    <ChildComponent2 />, 
    document.querySelector('#component-2') 
    } 
}); 

ReactDOM.render(
    <MyParentComponent />, 
    //Inherit DOM mounts 
);

これは、しかし、それを処理するための正しい方法ではないかもしれない - 私は提案を開いています。私はこのようにして、MyParentComponentが状態値などを処理するようにしたいと思います。複数のReactDOM.render（）を追加するだけで、親コンポーネントはありません。

出典

2016-07-25 Qar

You cあなたが探しているものを

class Child1 extends React.Component { 
 
    render() { 
 
    const {count, onClick} = this.props; 
 
    return (
 
     <div onClick={onClick}>Child 1 {count}</div> 
 
    ); 
 
    } 
 
} 
 

 
class Child2 extends React.Component { 
 
    render() { 
 
    const {count, onClick} = this.props; 
 
    return (
 
     <div onClick={onClick}>Child 2 {count}</div> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.container1El = document.querySelector("#container-1"); 
 
    this.container2El = document.querySelector("#container-2"); 
 
    this.handleClick = this.handleClick.bind(this); 
 
    this.state = {count: 0}; 
 
    } 
 

 
    handleClick() { 
 
    this.setState({count: this.state.count + 1}); 
 
    } 
 

 
    renderChildren() { 
 
    const {count} = this.state; 
 
    const {handleClick, container1El, container2El} = this; 
 
    ReactDOM.render(<Child1 count={count} onClick={handleClick}/>, container1El); 
 
    ReactDOM.render(<Child2 count={count} onClick={handleClick}/>, container2El); 
 
    } 
 

 
    componentDidMount() { 
 
    this.renderChildren(); 
 
    } 
 
    
 
    componentDidUpdate() { 
 
    this.renderChildren(); 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    ReactDOM.unmountComponentAtNode(this.container1El); 
 
    ReactDOM.unmountComponentAtNode(this.container2El); 
 
    } 
 

 
    render() { 
 
    return null; 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.createElement("div"));

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

 
<div id="container-1"></div> 
 
<div id="container-2"></div>

出典

2016-07-25 16:32:39 SimpleJ

恐ろしく、ありがとう！ :) – Qar

親の 'componentWillUnmountI（）'で両方の 'unmountComponentAtNode（）'を呼び出すことを忘れないでください。それ以外の場合は、それらを漏れている。 –

@DanAbramovには、このようにレンダリングされた子コンポーネントに新しい小道具を渡す方法がありますか？ – clhenrick

-1

答えはありません。あなたがまだそれに対してReactを使いたいなら、これはあなたができる最高です。

var MyParentComponent = React.createClass({ 
    render: function() { 
    <div> 
     {this.props.children} 
     <ChildComponent1 /> 
     <ChildComponent2 /> 
    </div> 
    } 
}); 

ReactDOM.render(
    <MyParentComponent />, 
    //Inherit DOM mounts 
);

出典

2016-07-25 15:36:10 r0dney

どのようにこれは、子どもたちがさまざまなDOMオブジェクトにマウントするだろうか？ – nuway

私は大きなフォームを持っているので、いくつかのフィールドだけが反応機能を持っているはずです。したがって、反応成分はこの大きな形態の異なる場所に取り付けるべきです。あなたが示唆するように、フォーム全体を1つの大きな反応コンポーネントとして追加する必要がありますが、それは私にとって不幸なことです。 – Qar

2つのReactコンポーネントを2つのDOMノードにマウントし、それらを1つのルートコンポーネントの下に置くことはできません。私が考えることができる唯一の方法は、ReactDOM.render（）を別の子コンポーネントで2回呼び出すことですが、そのようにルートコンポーネントを共有することはありません。 – r0dney

親コンポーネントを作成する必要はありません、あなたは、あなたのようにあなたの構造を有することができる1で複数のコンポーネントを持つためにはUPDATE

ReactDOM.render()複数回

import ChildComponent1 from './Components/ChildComponent1'; 
import ChildComponent2 from './Components/ChildComponent2'; 


ReactDOM.render(
    <ChildComponent1 />, 
    document.getElementById('component-1') 
); 

ReactDOM.render(
    <ChildComponent2 />, 
    document.getElementById('component-2') 
);

を使用することができます。

import ChildComponent1 from './Components/ChildComponent1'; import ChildComponent2 from './Components/ChildComponent2'; var MyParentComponent = React.createClass({ render: function() { return( <div> <ChildComponent1 /> <div>Some text</div> <div>Some more text</div> <ChildComponent2 /> </div> )} }); ReactDOM.render( <MyParentComponent />, document.getElementById('app'); );

出典

2016-07-25 15:47:21

はい、しかし、私はすべての子供のコンポーネントで利用可能にする必要がある州と小道具の世話をする親コンポーネントを持っていないのですか？ :) – Qar

@ミスリルあなたは親コンポーネントを持つことはできず、子を異なるdomノードにレンダリングすることはできません。それは反応がどのように働くかではありません。 – erichardson30

@ erichardson30だから私はフォーム全体を1つの巨大な反応コンポーネントとして追加しなければならないでしょう。 :) – Qar

ポータルです：これはあなたの親コンポーネントのアップデート手動で子コンポーネントをレンダリングするcomponentDidMountとcomponentDidUpdateフックを使用して実現します。

子要素を自然なものとは異なるdomツリーにレンダリングすると便利なことがあります。たとえば、子供がbodyに追加されるようにするには、通常z-indexまたはopacityの理由があります。

私はここでそれを説明してきました：

<body> 
    <div id="reactAppContainer"> 
     <div className="a"> 
      a content 
     </div> 
    </div> 
    <div className="b"> 
     b content 
    </div> 
</body>

人気ポータルライブラリは、次のとおりです：reactAppContainer内部でレンダリングされたとき

<div className="a"> 
    a content 
    <Portal target="body"> 
     <div className="b"> 
      b content 
     </div> 
    </Portal> 
</div>

には、次のDOMを作り出すことができる：https://stackoverflow.com/a/31563614/82609

は、次の点を考慮して

react-portal、ポップアップ/フルスクリーンレイヤーのような単純なポータルに便利です。ツールチップ、ドロップダウン、ホットスポットのような（親に対する相対IE）「に配置ポータル」のために有用
react-tether、...

出典

2016-07-25 16:54:08

React - 別のDOMコンテナに子を持つ親コンポーネント

答えて

関連する問題