Динамический импорт компонентов в ReactJS - PullRequest
Новая
       8

Динамический импорт компонентов в ReactJS

0 голосов
/ 18 января 2019

Я только что испачкал свои руки с помощью response-js и наткнулся на этот фрагмент кода для динамического импорта компонентов в мое приложение, которое, похоже, не понимаю? 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }
  render() {
    const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    return(
      <div>
        {Component && <Component />} // the code i can't figure out
    //{Component} works fine too
       //{<Component />} gives error
      </div>
    )
  }
}

ReactDOM.render(<Dynamic path='./FirstComponent' />, document.getElementById('root'));

Может кто-нибудь объяснить, какая строка кода, которую я выделил, выглядит для меня каким-то условным рендерингом, но, насколько я знаю, это работает так, будто левая рука оценивается как true, правая рука отображается, но почему этот код работать только с {Component}?

1 Ответ

0 голосов
/ 18 января 2019

Потому что при начальном рендеринге {Component} оценивается как ноль. Как вы использовали деструктуризацию.

const { module: Component } = this.state;

так 

 Component = null

Но когда вы используете <Component/> при начальном рендеринге, <Component/> компонент отсутствует. Таким образом, использование { <Component />} дает ошибку.

Использование Component и <Component/> различны.

...