有条件地改变渲染 React 组件的顺序
Conditionally change order of rendering React component
我有三个组件 <Header />
<Body />
<Footer />
。我想根据以下条件更改显示顺序。
<div> <Header /> <Body /> <Footer /> </div>
或
<div> <Body /> <Header /> <Footer /> </div>
或根据某些新条件的不同顺序。
我建议你把订单放在一个数组中
headFirst = [ Header, Body, Footer ]
然后将它们映射到 return
if (headFirst) {
return (
<div>{
headFirst.map(Component => (
<Component key={ somethingunique } />
)
}</div>
)
}
你可以在 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>
)
}
我们可以按照我们想要的任何顺序将组件放入数组中,然后我们可以如下渲染。
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>
)
}
}
我也是这种情况,我已经找到了这个解决方案,希望对您有所帮助!
const Test = ({ condition }) => {
const [first, second, third] = condition
? [<Header />, <Body />, <Footer />]
: [<Footer />, <Body />, <Header />];
return (
<div>
{first}
{second}
{third}
</div>
);
};
通过这样做,您不必设置关键属性,并且在迭代时不要添加任何新的 div
标签。我做了一个例子,可以改变项目的顺序。
我有三个组件 <Header />
<Body />
<Footer />
。我想根据以下条件更改显示顺序。
<div> <Header /> <Body /> <Footer /> </div>
或
<div> <Body /> <Header /> <Footer /> </div>
或根据某些新条件的不同顺序。
我建议你把订单放在一个数组中
headFirst = [ Header, Body, Footer ]
然后将它们映射到 return
if (headFirst) {
return (
<div>{
headFirst.map(Component => (
<Component key={ somethingunique } />
)
}</div>
)
}
你可以在 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>
)
}
我们可以按照我们想要的任何顺序将组件放入数组中,然后我们可以如下渲染。
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>
)
}
}
我也是这种情况,我已经找到了这个解决方案,希望对您有所帮助!
const Test = ({ condition }) => {
const [first, second, third] = condition
? [<Header />, <Body />, <Footer />]
: [<Footer />, <Body />, <Header />];
return (
<div>
{first}
{second}
{third}
</div>
);
};
通过这样做,您不必设置关键属性,并且在迭代时不要添加任何新的 div
标签。我做了一个例子,可以改变项目的顺序。