Question

我刚开始接触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'));

有人可以解释一下我突出显示的代码行，它看起来对我来说是一种条件渲染，但是据我所知，它的工作方式就像左手评估为真，而右手渲染了，但是为什么这段代码如此也只使用{Component}？

Answer 1

因为在初始渲染select ut_color= MAX(case when category='UT' then color else NULL end), aoot_color= MAX(case when category='AOOT' then color else NULL end), od_color= MAX(case when category='OD' then color else NULL end), fd_color= MAX(case when category='FD' then color else NULL end), td_color= MAX(case when category='TD' then color else NULL end), sl_color= MAX(case when category='SL' then color else NULL end), ql_color= MAX(case when category='QL' then color else NULL end), nrt_color= MAX(case when category='NRT' then color else NULL end), ut_min= MAX(case when category='UT' then duration else NULL end), aoot_min= MAX(case when category='AOOT' then duration else NULL end), od_min= MAX(case when category='OD' then duration else NULL end), fd_min= MAX(case when category='FD' then duration else NULL end), td_min= MAX(case when category='TD' then duration else NULL end), sl_min= MAX(case when category='SL' then duration else NULL end), ql_min= MAX(case when category='QL' then duration else NULL end), nrt_min= MAX(case when category='NRT' then duration else NULL end), ut_percentage= MAX(case when category='UT' then percentage else NULL end), aoot_percentage= MAX(case when category='AOOT' then percentage else NULL end), od_percentage= MAX(case when category='OD' then percentage else NULL end), fd_percentage= MAX(case when category='FD' then percentage else NULL end), td_percentage= MAX(case when category='TD' then percentage else NULL end), sl_percentage= MAX(case when category='SL' then percentage else NULL end), ql_percentage= MAX(case when category='QL' then percentage else NULL end), nrt_percentage= MAX(case when category='NRT' then percentage else NULL end) from yourtable group by category时评估为null。如您所使用的解构。

{Component}

如此

const { module: Component } = this.state;

但是，当您在初始渲染时使用Component = null时，就没有<Component/>组件。因此，使用<Component/>会导致错误。

使用{ <Component />}和Component是不同的。

在ReactJS中动态导入组件

1 个答案: