All geek questions in one place

React - parent component with child in separate dom containers

Is it possible to have a component with child components that will be installed on different DOM objects?

Some pseudo codes to explain what I want to archive:

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
);

This may not be the best way to handle this - I'm open to suggestions. I want to make MyParentComponent take care of state values, etc. If I just add a few ReactDOM.render (), I will not have a parent component.

+4
source share
4 answers

You can achieve this by using hooks componentDidMountand componentDidUpdateto manually visualize child components when updating the parent component:

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>
Run codeHide result
+3

, , .

, . , , body, , z-index opacity.

: fooobar.com/questions/29601/...

:

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

DOM reactAppContainer:

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

:

+1

No need to create a parent component, you can use it ReactDOM.render()several times

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

To have several components in one, you can create your structure as:

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');
);
0
source

The answer is no, it is impossible. This is the best you can do if you still want to use React for this.

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

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

Source: https://habr.com/ru/post/1649049/

More articles:


All Articles