Проблема при реализации ReactDOM.createPortal (функция реагирования 16) - PullRequest
Новая
       30

Проблема при реализации ReactDOM.createPortal (функция реагирования 16)

0 голосов
/ 23 мая 2018

Для пояснения, скажем, у меня есть 3 компонента: <Child>, <Parent>, <GrandParent>

Я пытаюсь отрисовать <Child> в <GrandParent>, без рендеринга <Parent> (из которого <Child>call).

parent.js 

class Parent extends Component {
  ...
  componentDidMount() {
    return (
      <Route ... component={ Child } />
    );
  }

  render() {
  // the <Route> element is rendered here
  }
}

При нажатии на ссылку в <Parent> я хочу, чтобы <Parent> был размонтирован, а <Child> - для рендеринга.в пределах <GrandParent>, чего и должна достичь новая функция React 'Portal'.

Из документа вот как это должно быть реализовано: 

ReactDOM.createPortal(componentToRender, elementToRenderInto);
// Hence in my case:
ReactDOM.createPortal(<Child />, document.getElementById('grand-parent'));

Но я не уверен, как / где использовать этот кусок кода.Все, что я пытался отобразить <Child> рядом с <Parent>, это не то, что я хочу.Советы / документация / примеры по теме очень приветствуются

1 Ответ

0 голосов
/ 23 мая 2018

Если я правильно понял, компоненту-прародителю необходимо получить ссылку на базовый узел DOM и передать его до parent, тогда parent визуализирует портал с child.

Я думаю, этоможет быть тем, чего вы пытаетесь достичь: 

class GrandParent extends React.Component {
  state = {};
  getRef = that => this.setState({ self: that });
  render() {
    return (
      <div ref={this.getRef} style={{}}>
        +
        <Parent parent={this.state.self}>
          <Child />
        </Parent>
        +
      </div>
    );
  }
}

class Parent extends React.Component {
  render() {
    if (this.props.parent)
      return createPortal(this.props.children, this.props.parent);
    return (
      <div>
        parent<Child />
      </div>
    );
  }
}

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

codesandbox

...