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

큰 양식을 가지고 있기 때문에 몇 개의 필드 만 반응 기능을 가져야합니다. 따라서 반응 구성 요소는이 큰 형태의 다른 장소에 장착되어야합니다.당신이 제안처럼 을 위해, 나는 나에게 잔인한 것 하나 개 반응하는 큰 요소로 전체 양식을 추가해야합니다. – Qar

두 개의 React 구성 요소를 두 개의 DOM 노드에 마운트하고 하나의 루트 구성 요소 아래에 둘 수 있다고 생각하지 않습니다. 내가 생각할 수있는 유일한 방법은 다른 자식 컴포넌트로 ReactDOM.render()를 두 번 호출하는 것이지만, 그런 식으로 루트 컴포넌트를 공유하지는 않을 것이다. – r0dney

부모 구성 요소를 만들 필요가 없습니다, 당신이 사용할 수있는 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') 
);

UPDATE

당신이 당신의 구조 등을 할 수 있습니다 하나에서 여러 구성 요소를 갖기 위해 :

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

@Mithril 당신은 부모 구성 요소를 가질 수없고 자식을 다른 dom 노드로 렌더링 할 수 없습니다. 그것은 반응하는 방식이 아닙니다. – erichardson30

@ erichardson30 그래서 전체 양식을 하나의 거대한 반응 구성 요소로 추가해야 할 것입니다. 단, 일부만 기능을 추가해야 할 필요가 있습니까? :) – 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, 팝업/전체 화면 레이어와 같은 간단한 포털에 유용합니다. 툴팁, 드롭 다운, 핫스팟 등 (자신의 부모 즉, 상대) "위치 포털"에 대한
react-tether

출처

2016-07-25 16:54:08

React - 다른 DOM 컨테이너에 자식이있는 부모 구성 요소

답변

관련 문제