Question

我试图按其奇数和偶数索引对数组进行排序，然后通过将其作为道具传递给另一个组件来显示其数据。

让我解释一下我的工作原理：

我有一个称为产品（woocommerce数据）的数组。

const products = [
  { attributes: [{ option: "size 1" }] },
  { attributes: [{ option: "size 2" }] },
  { attributes: [{ option: "size 3" }] }
];

我已经建立了一个.map()函数，在该函数中，对于数组中的每个对象，我将返回一个组件，如下所示：

let sizeVariations = products.map((product, index) => {
  return (
    <div key={index}>
      <Buttons
        sizeEven={product.attributes[0].option}
        sizeOdd={product.attributes[0].option}
      />
    </div>
  );
});

我想通过两个不同的道具sizeEven和sizeOdd来传递尺寸，它们等于product.attributes[0].option。

但是对于product.attributes[0].option，我想针对每个道具“弹出”或过滤掉所有相应的奇数或偶数索引。

我该怎么做？

目前，我使用的这种格式（https://codesandbox.io/s/018488478p）无法使用，因为您只能在evenArray或oddArray中传递一个索引。

Answer 1

我不知道您想怎么做，但是实际上您不需要创建其他数组。我对CSS不太满意，但是在这里我如何用四个元素做到这一点。最后三个元素将居中。至少功能正常，但我不确定CSS。

更新

我对代码做了一些更改。我将Buttons组件定义为功能组件，而不是类。实际上，App也会这样，但是将来会有一些状态。我将map操作移到了一个单独的函数中，并将其移到return之外。因此，return方法中的逻辑更简洁。

注意：请勿像我在这里使用的那样为key使用索引。使用其他一些unqiue值。

See here。

如果项的顺序可能不建议使用索引作为键   更改。这会对性能产生负面影响，并可能导致问题   具有组件状态。查阅Robin Pokorny的文章，了解   关于使用索引作为索引的负面影响的深入解释   键。如果您选择不为列表项分配显式键，则   React将默认使用索引作为键。

这里是有关为什么您需要输入键的深入说明   有兴趣了解更多。

此外，如果React版本足够新，我们可以使用顶部的<React.Fragment>并使用一个键。

const Buttons = props => {
  const { products } = props;

  const renderOptions = () =>
    products.map((p, i) =>
      !( i % 2 )
             ? <div key={i} className="left">{p.attributes[0].option}</div>
             : <div key={i} className="right">{p.attributes[0].option}</div> );

  return <div className="container">{renderOptions()}</div>;
};

class App extends React.Component {
  render() {
    const products = [
      { attributes: [{ option: "size 1" }] },
      { attributes: [{ option: "size 2" }] },
      { attributes: [{ option: "size 3" }] },
      { attributes: [{ option: "size 4" }] },
    ];
   
    return (
      <div className="App">
        <Buttons products={products}  />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.container {
  width: 300px;
  height: 50px;
  padding-bottom: 10px;
  margin: 0 auto;
}

.left {
  width: 100px;
  height: 50px;
  margin: 0 20px 20px 0;
  border: 1px solid red;
  display: inline-block;
}

.right {
  width: 100px;
  height: 50px;
  border: 1px solid blue;
  display: inline-block;
}

<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>

Answer 2

 const products = [
    { attributes: [{ option: "size 1" }] },
    { attributes: [{ option: "size 2" }] },
    { attributes: [{ option: "size 3" }] }
  ];

  const evenArray = products.filter((product, index) => index % 2 )

我们可以使用Array.filter方法来创建一个新数组，其中的元素可以通过我们提供的测试(product, index) => index % 2，在这种情况下，如果元素索引可以被2整除，则可以使用modulus operator

找出答案

如何根据元素的奇数或偶数索引删除数组中的元素？

2 个答案: