Question

我有三个组件<Header /> <Body /> <Footer />。我想根据条件更改显示顺序如下。

<div> <Header /> <Body /> <Footer /> </div>

或

<div>  <Body /> <Header /> <Footer /> </div>

根据某些新情况，

或某些不同的顺序。

Answer 1

我建议您将订单放在数组中

headFirst = [ Header, Body, Footer ]

然后将它们映射到返回

中

 if (headFirst) {
  return (
    <div>{
      headFirst.map(Component => (
       <Component key={ somethingunique } />
      )
    }</div>
  )
 }

Answer 2

你可以在渲染函数中创建3个变量：

render() {
let first: any = null;
let second: any = null;
let third: any = null;

if (condition) {
  first = (<Body />);
  second = (<Header />);
  third = (<Footer />);
};

return (
  <div>
    {first}
    {second}
    {third}
  </div>
)
}

Answer 3

我们可以按照我们想要的顺序将组件放入数组中，然后我们可以如下呈现。

class Layout extends React.Component {
  render() {
    let componentsOrder = [];
    componentsOrder = isEnabled('renderBottom') ? [<List />, <AddToDo />] : [<AddToDo />, <List />]
    componentsOrder = isEnabled('filter') ? [...componentsOrder, <Filter />] : [...componentsOrder]
    return (
      <div>
        {componentsOrder.map((v, i) => <div key={i}>{v}</div>)}
      </div>
    )
  }
}

Answer 4

我在这里也是同样的情况，并且已经解决了这个问题，希望对您有帮助！

const Test = ({ condition }) => {
  const [first, second, third] = condition
    ? [<Header />, <Body />, <Footer />]
    : [<Footer />, <Body />, <Header />];

  return (
    <div>
      {first}
      {second}
      {third}
    </div>
  );
};

通过此操作，您不必设置关键道具，也不需要在迭代时添加任何新的div标签。我举了一个例子，可以改变项目的顺序。

https://codesandbox.io/embed/pjw7kywq80

有条件地改变呈现React组件的顺序

4 个答案: