javascript - 导入新的 React 组件会编译但不会渲染

Question

所以我正在处理的这段代码遇到了问题

依赖项:React、Redux、Eslinter、PropTypes、BreadCrumb

有一个 View 页面，可以从其他文件导入各种组件

现有结构:

import Component from './Component.js';

...

let var = '';

...

if (this.state.value !=== null) {
  var = <Component/>
}

...

render() {
  return(
    <div>
        SomeContent
        {var}
   </ div>
  )
}

当我尝试导入我创建的 PureComponent 时，代码会编译。

组件依赖项:{ Button、Modal }React-Bootstrap、React、PropTypes

但是页面没有呈现，我无法弄清楚当它以与现有结构相同的方式引入时它不会呈现的原因上面

更新:我尝试制作一个最低限度的组件，仅返回一个简单的 Div 并得到相同的结果

已解决:
我的组件中有一个从 'react-bootstrap' 到 Modal 的折旧引用，它仍然包含 node_module 引用标题，但不包含相应的 JS 文件，该文件已移至 'react-modal'

Answer 1

import Component from './Component.js';

let entity = '';


if (this.state.value !== null) {
    entity = <Component />
}


render() {
    return (
        <div>
            SomeContent
        {entity}
        </ div>
    )
}

首先，您不能使用var关键字来命名变量，并且请检查您的条件是否满足。