ReactJS Koans 杂货清单第 1 部分

ReactJS Koans Grocery-list part 1

本文关键字：单第 部分 Koans ReactJS      更新时间：2023-09-26

我正在尝试使用 Arkency 的 ReactJS Koans 学习 React。我被困在练习 05-挑战-杂货清单-part-1.jsx 上。当我在服务器上运行时，我的代码会正确显示列表，但是当我运行测试时，我得到"1）应该有一个无序列杂货列表......断言错误：杂货项应仅呈现

  • 标记内的文本。此文本应仅包含杂货商品名称。有什么想法吗？没有他们的注释，我的代码如下： 
    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} 对我来说，这听起来像是验证您的代码的程序希望它看起来与那里完全相同。

    相关文章：