为什么渲染函数不调用反应？答案

【问题标题】：why render function not call in react?为什么渲染函数不调用反应？
【发布时间】：2017-12-27 09:16:17
【问题描述】：

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

import { Component } from 'react';

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

export default ImageSlider;

a其他组件

 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>
    );
  }
}

【问题讨论】：

标签： reactjs react-native react-router react-redux

【解决方案1】：

变化：

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';

【讨论】：

【解决方案2】：

问题很简单，需要查看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

【讨论】：

【解决方案3】：

你也必须这样做

import React, { Component } from 'react;

【讨论】：