javascript - ReactJS Koans 杂货 list 第 1 部分

Question

我正在尝试使用 Arkency 的 ReactJS Koans 来学习 React。我陷入了练习 05-Challenge-GroceryList-part-1.jsx。当我在服务器上运行我的代码时，我的代码会正确显示该列表，但是当我运行测试时，我得到“1)应该有一个无序的杂货列表... AssertionError:GroceryItem 应该仅渲染 < li > 标记内的文本。该文本应仅包含杂货商品名称。”有任何想法吗？如果没有他们的评论，我的代码如下:

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

Answer 1

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

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

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

这段代码实际上是进入杂货 Prop 并获取名称值{this.props.grocery.name}。

尝试将名称添加到杂货 Prop 中:

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

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