有条件地向组件添加属性

Question

我有一个平面列表，只有当 numColumns 大于 1 时我才想在其中添加 columnWrapperStyle ，否则我会得到一些 error.I 尝试了类似下面的东西

     <FlatList
              data={data}
              if(numColumns>1)
              {
                columnWrapperStyle={{ justifyContent: "space-evenly" }}
              }
            }
>

我搜索过很多人告诉我在属性中使用状态..但我不想要属性名称 itself.how 我要这样做吗？

Answer 1

试试这个：

const renderFlatList = (data,newColumn)=>
{ if(newColumn > 1)
      return <FlatList
           data={data}
           columnWrapperStyle={{ justifyContent: "space-evenly" }/>

return <FlatList data={data}/>
}

并像下面一样使用它：

{renderFlatList(data,newColumn)}

Answer 2

const flatListData = { data };
if(numColumns>1) {
  flatListData.columnWrapperStyle= { justifyContent: "space-evenly" };
}

return (
  <FlatList {...flatListData} />
);

Answer 3

方法一

在外面制作道具：

const flatlistProps = numColumns > 1 ? { data, columnWrapperStyle : ...} : { data }

<Flatlist {...flatlistProps} />

方法二

条件渲染：

{numCounts > 1 ? <Flatlist data={data} columnWrapperStyle={...} /> : <Flatlist data = {data} />}

有条件地向组件添加属性

Conditionally add attributes to components

jsx

reactjs

react-native

flatlist

方法一

方法二