Question

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

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>

Answer 1

如果您说您的代码没有像您期望的那样呈现。然后你应该知道，在做出反应时，当你使用地图时，你应该为每个项目提供一个关键，即如何反应跟踪它。关键应该是任何独特的财产。在你的情况下，它可以是标题。通常它应该是一个id或你可以使用索引。所以在

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

相反，你应该这样做。

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

如果根本不渲染，则应提供错误。

Answer 2

我的意思是＆＃34;没有渲染＆＃34;是的，它没有给我任何错误，但我只是无法在本地主机中看到任何东西。不知道，我能告诉你什么。

Answer 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所说的那样呈现。

流星（反应）无法呈现

3 个答案: