使用不起作用的类组件来反应基本列表

Question

React的新功能并尝试关注此页面：https://facebook.github.io/react/docs/lists-and-keys.html

我有两个组成部分：

App.js

var React = require('react');

class NumberList extends React.Component {
  constructor(props) {
    super(props);
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
      <li>{number}</li>
    );
  }

  render() {
    return <ul>test {listItems}</ul>;
  }
}

module.exports = NumberList;

NumberList.js

var React = require('react');
var ReactDOM = require('react-dom');
var App =
require('./components/App');

ReactDOM.render(
  <App name="Sarah"/>,
  document.getElementById('app')
);

index.js

listItems not defined

我收到了一个Javascript错误：

return <ul>test {listItems}</ul>;

我是否需要以某种方式将listItems存储为状态？

更新

我尝试过改变：

return <ul>test {this.listItems}</ul>;

到

def initialize(context):
    g.security = '000001.XSHE'
    set_benchmark('000300.XSHG')

def handle_data(context,data):
    security = g.security
    order(security, 100)

我只是得到一个空白的“测试”字样而没有列表项......

Answer 1

因为在你的构造函数中，如果你写了

const listItems = numbers.map((number) =>
  <li>{number}</li>
);

然后listItems是一个局部变量，render函数无法识别它。

如果您想通过this.listItems中的render进行访问，则需要撰写：

this.listItems = numbers.map((number) =>
  <li>{number}</li>
);

但这可能不起作用，因为在构建组件时，道具可能尚未传递下来。您需要在componentWillReceiveProps

中写下此内容

通常你可以在渲染函数中编写.map，不要忘记key：

render() {
  return (
    <ul>
      {this.props.numbers.map((number, i) =>
        <li key={i}>{number}</li>)}
    </ul>
  )
}

如果您不喜欢这种风格，只需将其提取到函数或变量中，例如：

render() {
  const listItems = this.props.numbers.map((number, i) =>
    <li key={i}>{number}</li>
  )

  return (
    <ul>{listItems}</ul>
  )
}