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

Question

Я только что испачкал свои руки с 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, правая рука отображается, но почему этот код работает только с {Компонент} также?

Answer 1

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

const { module: Component } = this.state;

так

 Component = null

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

С помощью Component а также <Component/> разные.