代码之家 › 专栏 › 技术社区 › Nick Kinlen

React-JSX语法问题,以及如何在换行符上使用映射和显示项进行迭代

array.prototype.map jsx iteration reactjs javascript

0

Nick Kinlen · 技术社区 · 6 年前

我是一个反应迟钝的人,会做一份待办事项清单 Recipe List app .我有一个功能部件,项目。js,我使用JSX和map函数迭代每个菜谱项并显示它们。我希望每个菜谱项目出现在新的一行,但当我使用。map to iterate through React将整个配方项目列表放入一个p标记中,而不是每个项目一个p标记。

我如何反复浏览配方项目,并在单独的行中显示它们?即使我试图将它们显示为无序列表,我也希望将每个项目都放入一个li标记中。

这是我的代码:

import React from 'react';
import Button from 'react-bootstrap/lib/Button';


const Item = (props) => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>

        {props.items.map((item, index) => 
        <div className="Recipe-Item" key={index}>

            <h3>{item}</h3>

            <p>{props.ingredients[index]}</p>

          <div className="buttons-container">
            <Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
            <Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
          </div>

        </div>
      )}
    </div>
  </div>
)


export default Item;

也在 {props.items.map((item, index) => 如果在=>之后添加一个大括号;我犯了个错误。我安装了React/JSX linter,但它什么也抓不到。有什么问题吗?

我知道这可能是一个noob错误,但JSX让我在这里陷入了困境。

2 回复 | 直到 4 年前

1

Sushanth -- 6 年前

如果在胖箭头后添加大括号,则必须显式返回 JSX .

const Item = (props) => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>

      {props.items.map((item, index) => {
          return (
              <div className="Recipe-Item" key={index}>

              <h3>{item}</h3>

              <p className="ingredients-list">
                   {props.ingredients[index].map((ingredient, ingredientIndex) => {
                      return (
                           <div className="ingredient" key={ingredient}>
                               {ingredient}
                           </div>
                     )
                   }}
              </p>

              <div className="buttons-container">
                <Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
                <Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
              </div>

            </div>
          )
        }
      )}
    </div>
  </div>
)

2

1

devserkan 6 年前

这是工作版本。

class App extends React.Component {
  state = {
    items: [ "Pumpkin Pie", "Spaghetti", "Onion Pie" ],
    ingredients: [
      [ "Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust" ],
      [ "Noodles", "Tomatoe", "Sauce", "Meatballs" ],
      [ "Onion", "Pie Crust" ],
    ],
  }

  render() {
    return (
      <div className="box">
        <Item items={this.state.items} ingredients={this.state.ingredients} />
      </div>
    );
  }
}

const Item = props => (
  <div>
    <div className="Recipe-Item-Container" key={props.text}>

      {props.items.map( ( item, index ) => (
        <div className="Recipe-Item" key={item}>

          <h3>{item}</h3>
          <ul>
            {
              props.ingredients[ index ].map( ingredient =>
                <li key={ingredient}>{ingredient}</li> )
            }
          </ul>


          <div className="buttons-container">
            <button className="edit-button" onClick={() => props.edit( item, index )}>Edit</button>
            <button className="delete-button" onClick={() => props.delete( item, index )}>Delete</button>
          </div>

        </div>
      ) )}
    </div>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

但如果我是你,我会改变我的状态。诸如此类:

class App extends React.Component {
  state = {
    items: [
      {
        name: "Pumpkin Pie",
        ingredients: [
          "Pumpkin Puree",
          "Sweetened Condensed Milk",
          "Eggs",
          "Pumpkin Pie Spice",
          "Pie Crust"
        ]
      },
      {
        name: "Spaghetti",
        ingredients: ["Noodles", "Tomatoe", "Sauce", "Meatballs"]
      },
      {
        name: "Onion Pie",
        ingredients: ["Onion", "Pie Crust"]
      }
    ]
  };

  removeItem = item => {
    const newItems = this.state.items.filter(el => el.name !== item.name);
    this.setState({ items: newItems });
  };

  editItem = item => alert(`${item.name} will be edited`);

  renderItems = () =>
    this.state.items.map(item => (
      <Item
        key={item.name}
        item={item}
        removeItem={this.removeItem}
        editItem={this.editItem}
      />
    ));

  render() {
    return <div className="box">{this.renderItems()}</div>;
  }
}

const Item = props => {
  const { item, removeItem, editItem } = props;
  const handleRemove = () => removeItem(item);
  const handleEdit = () => editItem(item);

  return (
    <div>
      <div className="Recipe-Item-Container" key={props.text}>
        <div className="Recipe-Item">
          <h3>{item.name}</h3>
          <ul>
            {item.ingredients.map(ingredient => (
              <li key={ingredient}>{ingredient}</li>
            ))}
          </ul>
          <div className="buttons-container">
            <button className="edit-button" onClick={handleEdit}>
              Edit
            </button>
            <button className="delete-button" onClick={handleRemove}>
              Delete
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js“></script>
<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js“></script>
<div id=“root”></部门>

变化

状态形状:我们不是保留两个数组,而是每个项目保留一个对象。这个物体有一个 name 和 ingredients 所有物也许在未来,它可能会有一个独特的 id ? 物体是灵活的。
而不是将所有项目传递给 Item 组件中,我们正在映射父组件中的项,并只将一个项传递给 项目 组成部分
我们仍然在父级中定义了处理函数。但是,我们并没有直接在按钮的回调函数中使用箭头函数。因此,它们不会在每次渲染中重新创建。此外,我们不必使用索引将项目传递回父级。我们有 item 自立!您可以看到我们如何处理删除功能:使用 .filter 您可以将相同的功能应用于其他功能。 .map , 滤器 , Object.assign 或扩展语法都是很好的工具。只是,避免直接改变你的状态。