有条件地改变渲染 React 组件的顺序

Question

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

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

或

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

或根据某些新条件的不同顺序。

Answer 1

我建议你把订单放在一个数组中

headFirst = [ Header, Body, Footer ]

然后将它们映射到 return

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

Answer 2

你可以在 render 函数中创建 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 组件的顺序

Conditionally change order of rendering React component

reactjs

react-dom