Question

我正在尝试使用组件显示我的列表。但它没有显示。我喜欢这个

import { Component } from 'react';

class ImageSlider extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<div>{this.props.data.hl}</div>);
  }
}

export default ImageSlider;

其他组件

 renderStories() {
    if (this.props.stories && this.props.stories.items > 0) {
      return this.props.stories.items.map(story => {
        return <ImageSlider data={story}/>;
      });
    }
  }
  render() {
    return (
      <div>
        lll
        {this.renderStories()}
      </div>
    );
  }
}

Answer 1

问题非常简单，您需要检查length of items array

if (this.props.stories && this.props.stories.items.length > 0) {
  return this.props.stories.items.map(story => {
    return <ImageSlider data={story}/>;
  });
}

并在ImageSlider组件

中导入React

import React, {Component} from 'react';

请参阅此答案：Need help on React Js

DEMO

Answer 2

变化：

renderStories() {
  if (this.props.stories && this.props.stories.items > 0) {
    return this.props.stories.items.map(story => {
      return <ImageSlider data={story}/>;
    });
  }
}

为：

renderStories() {
  if (this.props.stories && this.props.stories.items && this.props.stories.items.length > 0) {
    return this.props.stories.items.map(story => {
      return <ImageSlider data={story}/>;
    });
  }
}

应该让它有效。

同样在/components/image.slider.js中，您应该导入React，否则会显示React is not defined之类的错误。

import React, { Component } from 'react';

Answer 3

您还必须这样做

import React, { Component } from 'react;

为什么渲染函数没有调用反应？

3 个答案: