根据他们的 id 是奇数还是偶数来交替

Question

我正在为网页使用 React。在一个组件中，我左边有一个div，右边有一个图像。

我希望他们根据他们的id是奇数还是偶数来交替。

function Item({ title, text, link, img,id }) {
  return (
    <div >
      <div>
        <h3>
          {title}
        </h3>
        <p>{text}</p>
        <a href={link}>
          text
        </a>
      </div>
      <img src={img} alt={title} />
    </div>
  );
}

Answer 1

将 div 变成一个组件并按您想要的顺序有条件地渲染它们：

function Item(props) {
  return (
    props.id % 2 == 0 ? 
    <div >
      <Div {...props} />
      <img src={img} alt={title} />
    </div>
    :
    <div >
      <img src={img} alt={title} />
      <Div {...props} />
    </div>
  );
}


const Div = ({ title, text, link }) => (
  <div>
    <h3>
      {title}
    </h3>
    <p>{text}</p>
    <a href={link}>
      text
    </a>
  </div>
)

根据他们的 id 是奇数还是偶数来交替

alternate depending on whether their id is odd or even React

javascript

reactjs

alternate