Javascript ReactJS Koans杂货店清单第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>
    );
  }
}

var React=require（“React”）；
类GroceryList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
食品杂货：[{名称：“苹果”}]
};
}
render（）{
对于（var index=0；index
{groceriesComponents}

);
}
}
类GroceryListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props}

);
}
}

---

然后，在您的组件中，您将执行

{this.props.groffy}

对我来说，这听起来像是验证代码的程序希望它看起来与它们完全相同。

当我使用

{this.props.groffy.name}

时，我得到了在浏览器中显示的正确值，但测试套件仍然给我相同的错误消息。如果您想查看@neallred-Hmmmm上提供的测试套件，那么听起来它希望您编写与它们完全相同的代码。看看我的编辑！你的第一个解决方案很有效。我不小心用你的结果编辑了一个临时文件，所以实际测试的文件没有被更改。它适用于第一个建议。谢谢很高兴听到@尼尔瑞德

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

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

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