导入新的React组件会编译但无法渲染

Question

所以我一直在处理我正在处理的这段代码

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

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

现有结构如下：

import Component from './Component.js';

...

let var = '';

...

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

...

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

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

组件依赖项：{按钮，模式} 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关键字来命名变量，并且，请检查您的条件是否满足。

Answer 2

在处理state和conditional rendering时，应将条件放在render方法内（或在类字段中）：

工作示例：

---

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;