Question

您好我在React中实现了一些基本导航，我有以下代码：

已编辑.js

 var Navigation = React.createClass({
  getDefaultProps: function() {
    return {
      navigationItems: [
        { 'id': 1, 'name': 'Home', 'url': '/home' },
        { 'id': 2, 'name': 'About', 'url': '/about' },
        { 'id': 3, 'name': 'Contact', 'url': '/contact' }
      ]
    };
  },
  render: function() {
    return (
      <nav>
        <ul>
          {this.props.navigationItems.map(function() {
            return (
              <li><a href={this.props.url}>{this.props.name}</a></li>
            );
          })}
        </ul>
      </nav>
    );
  }
});

module.exports = Navigation

它给我发了以下错误：Uncaught TypeError: Cannot read property 'props' of undefined。有什么想法吗？

Answer 1

除非您将其传递给将其传递给Navigation的其他组件，否则navigationItems不是道具。您应该通过调用navigationItems.map()

来正常访问它

Answer 2

看起来你没有设置任何道具。而不是变量赋值，使用getDefaultProps加载道具的初始对象：

var Navigation = React.createClass({
  getDefaultProps: function() {
    return {
      navigationItems: [
        { 'id': 1, 'name': 'Home', 'url': '/home' },
        { 'id': 2, 'name': 'About', 'url': '/about' },
        { 'id': 3, 'name': 'Contact', 'url': '/contact' }
      ]
    };
  },

  render: function() {
    ...
  }
});

Answer 3

<ul>...</ul>部分应为

<ul>
  {this.props.navigationItems.map(function(item) {
    return (
      <li key={item.id}><a href={item.url}>{item.name}</a></li>
    );
  })}
</ul>

this.props.navigationItems是一个数组。当使用map迭代它时，您可以访问回调中的每个数组项。查看the document

另外，请记住在React的每个列表项标签上设置一个键以使其更好。

Answer 4

我认为一个简单的for循环就足够了吗？ jsFiddle

var Navigation = React.createClass({
  getDefaultProps: function() {
    return {
      navigationItems: [
        { 'id': 1, 'name': 'Home', 'url': '/home' },
        { 'id': 2, 'name': 'About', 'url': '/about' },
        { 'id': 3, 'name': 'Contact', 'url': '/contact' }
      ]
    };
  },
  render: function() {
      var navItems = [];
      var length = this.props.navigationItems.length;
      var id = null;
      var url = null;
      var name = null;
      for(var i=0; i<length; i+=1) {
        id = this.props.navigationItems[i].id;
        url = this.props.navigationItems[i].url;
        name = this.props.navigationItems[i].name;
        navItems[i] = <li key={id}><a href={url}>{name}</a></li>;
      }
      return (
        <nav>
          <ul>
            {navItems}
          </ul>
        </nav>
      );
  }
});
React.render(<Navigation />, document.getElementById('container'));

React - 填充<li>错误

4 个答案: