Javascript 导入新的React组件会编译但不会呈现

因此，我一直在与我的工作代码的问题

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

有一个从其他文件导入各种组件的视图页面

现有结构如下：

从“/Component.js”导入组件；
...
设var=''；
...
if（this.state.value！==null）{
var=
}
...
render（）{
返回(
一些内容
{var}
)
}

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

组件依赖项：{Button，Modal}React引导，React，PropTypes

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

更新：我试着制作一个只返回一个简单Div的最小组件&得到了相同的结果

已解决：
我的组件中有一个从'react-bootstrap'到Modal的折旧引用，该引用仍然包含节点模块引用标题，但不包含相应的JS文件，该文件后来被移动到'react-Modal'

从“/component.JS”导入组件；
import Component from './Component.js';

let entity = '';


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


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

让实体=“”；
if（this.state.value！==null）{
实体=
}
render（）{
返回(
一些内容
{实体}
)
}

首先，您不能使用var关键字来命名变量，同时，请检查您的条件实现情况

从“/Component.js”导入组件；
让实体=“”；
if（this.state.value！==null）{
实体=
}
render（）{
返回(
一些内容
{实体}
)
}

---

首先，您不能使用var关键字来命名变量，同时，请检查您的条件实现情况

处理

状态

和时，应在

呈现

方法（或类字段）中设置条件：

工作示例：

---

从“React”导入React；
从“./OtherComponent”导入其他组件；
类示例扩展了React.Component{
构造函数（）{
超级（）；
此.state={
值：“”
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
一些内容
{this.state.value&&}


);
}
}
导出默认示例；

在处理

状态

和时，应在

呈现

方法（或类字段）中设置条件：

工作示例：

---

从“React”导入React；
从“./OtherComponent”导入其他组件；
类示例扩展了React.Component{
构造函数（）{
超级（）；
此.state={
值：“”
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
一些内容
{this.state.value&&}


);
}
}
导出默认示例；

是否“页面不呈现”意味着根本没有显示任何内容，或者只是不显示您的组件？整个页面停止呈现，这表明出现错误。检查浏览器的开发者控制台，查看是否出现错误。

var

是保留字。您不应该将其用作变量名

let var=''。这可能是您的issuevar的一部分，仅用于演示目的。实际引用是
让var='
是否“页面未呈现”意味着根本没有显示任何内容，或者仅仅不是您的组件？整个页面停止呈现，这将指示错误。检查浏览器的开发者控制台，查看是否出现错误。
var
是保留字。您不应该将其用作变量名
let var=''。这可能是您的issuevar的一部分，仅用于演示目的。实际引用是
let var='
var纯粹用于演示目的。实际引用是
let var='
您无需将组件分配给变量/状态，您可以在return语句中执行条件呈现，它将起作用。var仅用于演示目的。实际引用是
let var='
您不需要将组件分配给变量/状态，您可以在return语句中执行条件呈现，它将起作用。
import Component from './Component.js';

let entity = '';


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


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

import React from "react";
import OtherComponent from "../OtherComponent";

class Example extends React.Component {
  constructor() {
    super();

    this.state = {
      value: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
        SomeContent
        {this.state.value && <OtherComponent />}
        <br />
        <input
          value={this.state.value}
          placeholder="Type something..."
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default Example;