React-teleports concept

01-react-teleports.md

React-teleports concept

<TeleportManager>
  <Foo>
    <TeleportExit id="abc" />
    <Bar>
      <TeleportEntrance id="abc">
        <Baz />
      </TeleportEntrance>
    </Bar>
  </Foo>
</TeleportManager>

<Baz /> renders in place of <TeleportExit />, and <TeleportEntrance /> renders null.

02-example-modal.js

// Supposed we have <TeleportManager> up in the tree, and <TeleportExit id="modal" /> somewhere.

const Foo = React.createClass({
  getInitialState() {
    return {
      opened: false
    }
  },
  render() {
    return <div>
      <button onClick={() => {this.setState({opened: true})}}>Open</button>
      {this.state.opened && <TeleportEntrance id="modal">
        <Modal foo="foo" bar="bar" />
      </TeleportEntrance>}
    </div>
  }
})



// Note: same can be done using flux. And probably this is the right way.

const Foo = React.createClass({
  render() {
    return <div>
      <button onClick={() => {dispatch(openModal({foo: "foo", bar: "bar"}))}}>Open</button>
    </div>
  }
})

// This is renderend instead of <TeleportExit id="modal" />
const ModalHost = React.createClass({
  render() {
    const {isModalOpened, currentModalProps} = readFromFluxStoreSomehow()
    return isModalOpened && <Modal {...currentModalProps} />
  }
})

// The problem of Flux solution is that you may have to store React-elements in Flux stores, 
// if you want the <Modal /> to also accept the children prop.