1

我刚刚用 react-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'));

有人可以解释一下我突出显示的代码行吗{组件} 也是？

4

1 回答 1

1

因为在初始渲染时{Component}评估为 null。正如您使用解构一样。

const { module: Component } = this.state;

所以

 Component = null

但是当您<Component/>在初始渲染时使用时，没有<Component/>组件。所以使用{ <Component />}会出错。

使用Component和<Component/>不同。

于 2019-01-18T07:29:42.943 回答