流星（反应）不渲染答案

【问题标题】：Meteor (react) not rendering流星（反应）不渲染
【发布时间】：2018-03-25 03:11:40
【问题描述】：

我尝试学习有关 Udemy 的课程，但我对一些编码进行了自己的调整，只是想看看我是否可以让它发挥作用。但是我的代码不会在本地主机中呈现，所以我在这里寻求帮助。希望有人可以查看代码并通过查看以下代码告诉我原因：

import React from 'react';
import ReactDOM from 'react-dom';

import ImageList from './components/imagelist';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <ImageList/>
      </div>
    );
  }
}

Meteor.startup(() => {
  ReactDOM.render(<App/>, document.getElementById('app'));
});

import React from 'react';

export default class ImageDetail extends React.Component {
  render() {
    return (
      <li className="media list-group-item">
        <div className="media-left">
          <img src={props.image.link}/>
        </div>
        <div className="media-body">
          <h4 className="media-heading">
            {props.image.title}
          </h4>
        </div>
      </li>
    );
  }
}

import React from 'react';

import ImageDetail from './imagedetails';

export default class ImageList extends React.Component {
  render() {
    const IMAGES = [
      {title: 'Pen', link: 'https://dummyimage.com/600x400'},
      {title: 'Pine tree', link: 'https://dummyimage.com/600x400'},
      {title: 'Mug', link: 'https://dummyimage.com/600x400'}
    ];

    RenderedImages = IMAGES.map(function(image) {
      return <ImageDetail image={image}/>
    });

    return (
      <ul className="media-list list-group">
        {this.RenderedImages}
      </ul>
    );
  }
}

<head>
  <title>Images</title>
</head>

<body>
  <div id="app"></div>
</body>

【问题讨论】：

您必须向我们提供的不仅仅是“我的代码不会呈现”。向我们提供错误或正在发生的事情的描述。将您的代码分解为您正在使用的不同文件并描述它们的文件位置也是一个好主意 - Meteor 有特定的约定，这些约定会影响在何处运行代码。
我所说的“不渲染”的意思是，它不会给我任何错误，但我只是无法在本地主机中看到任何内容。不知道，我还能告诉你什么。
所以我假设页面是空白的（没有呈现任何元素）。您的浏览器控制台是否会给您任何警告/错误？流星构建工具呢？
在 Google 开发中。它说，“DevTools 无法解析源映射”
在ImageDetail中你需要使用this.props，我相信

标签： javascript reactjs meteor

【解决方案1】：

如果您说您的代码未按预期呈现。那么你应该知道，在 react 中，当你使用 map 时，你应该为每个 item 提供一个 key，这就是 react 跟踪它的方式。密钥应该是任何唯一的属性。在您的情况下，它可以是标题。通常它应该是一个 id 或者你可以使用 index 。所以在

  RenderedImages = IMAGES.map(function(image) {
      return <ImageDetail image={image}/>
    });

您应该这样做。

  RenderedImages = IMAGES.map(function(image) {
      return <ImageDetail key= {image.title} image={image}/>
    });

如果它根本没有呈现，你应该提供错误。

【讨论】：

【解决方案2】：

我所说的“不渲染”的意思是，它不会给我任何错误，但我只是无法在本地主机中看到任何东西。不知道，我还能告诉你什么。

【讨论】：

提供控制台日志

【解决方案3】：

cd your/project/path
meteor npm install --save react react-dom
meteor add whatever-meteor-package

我遇到了同样的问题，除了我终于意识到从meteor/some-lib 导入意味着我必须通过meteor add some-lib 安装，而导入中不以meteor 开头的其他导入将使用npm 安装或meteor npm。如import { Component } from 'react';

还有相对的本地导入，不需要“安装”，但要考虑它们可能的依赖关系。

调试起来真的很烦人，因为我不记得在他们的教程中读过这个，而且真的没有错误消息。它只是不像 OP 所说的那样渲染。

【讨论】：