javascript - ReactJS Koans杂货店 list 第1部分

我正在尝试使用Arkency的ReactJS Koans学习React。我坚持练习05-Challenge-GroceryList-part-1.jsx。当我在服务器上运行它时，我的代码正确显示了该列表，但是当我运行测试时，我得到“ 1）应该有一个无序的杂货列表... AssertionError：GroceryItem应该只在

标记内呈现文本。该文本应仅包含杂货项目名称。”有任何想法吗？没有他们的评论，我的代码如下：

var React = require("react");
class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [ { name: "Apples" } ]
    };
  }

  render() {
    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem
            grocery={this.state.groceries[index]}
          />
      );
    }

    return (
      <ul>
        {groceriesComponents}
      </ul>
    );
  }
}

class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <li key={this.props}>
          {this.props}
        </li>
    );
  }
}

最佳答案

class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <li key={this.props}>
          {this.props.grocery.name}
        </li>
    );
  }
}

试试看请注意，您使用的是this.props，不会打印杂货店的名称...您必须引用prop。像上面一样。

这段代码实际上进入了杂货店道具，并获取了名称值{this.props.grocery.name}。

尝试仅在杂货店道具中添加名称：

groceriesComponents.push(
          <GroceryListItem
            grocery={this.state.groceries[index].name}
          />
      );

然后在您的组件中执行{this.props.grocery}对我来说，听起来好像正在验证您的代码的程序希望它看起来与那里的完全一样。