导入新的 React 组件编译但不渲染答案

【问题标题】：Importing New React Component Compiles But Does Not Render导入新的 React 组件编译但不渲染
【发布时间】：2020-04-12 03:14:58
【问题描述】：

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

依赖：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 时，代码编译。

组件依赖：{ Button, Modal }React-Bootstrap, React, PropTypes

但是页面没有渲染，我想不通当它以与现有结构相同的方式引入时它不会渲染的原因以上

更新：我尝试制作一个仅返回一个简单 Div 的最小组件并得到相同的结果

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

【问题讨论】：

“页面不呈现”是否意味着什么都没有出现，或者只是不是你的组件？
整个页面停止渲染
这表示错误。检查浏览器的开发者控制台，看看是否出现错误。
var 是保留字。您不应该将它用作变量名let var = '';。这可能是您的问题的一部分
var 仅用于演示目的，实际参考为 let var = ' '

标签： javascript reactjs react-redux eslint react-bootstrap

【解决方案1】：

import Component from './Component.js';

let entity = '';


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


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

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

【讨论】：

var 仅用于演示目的，实际参考为 let var = ' '
您不需要将组件分配给变量/状态，您可以在return语句中进行条件渲染，它会起作用。

【解决方案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;

【讨论】：