有条件地向组件添加属性答案

【问题标题】：Conditionally add attributes to components有条件地向组件添加属性
【发布时间】：2021-08-16 12:28:14
【问题描述】：

我有一个平面列表，我只想在 numColumns 大于 1 时添加 columnWrapperStyle，否则我会收到一些错误。我尝试了类似下面的操作

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

我搜索并告诉很多人在属性中使用状态..但我不想要属性名称本身。我该怎么做？

【问题讨论】：

标签： reactjs react-native jsx flatlist

【解决方案1】：

试试这个：

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

return <FlatList data={data}/>
}

并像下面一样使用它：

{renderFlatList(data,newColumn)}

【讨论】：

这适用于多列平面列表，就像我提到的那样，我收到错误，即 columnWrapperStyle 不支持多列。
@Graciewilliams 我更新了答案。试试看。

【解决方案2】：

方法一

在外面创建道具：

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

<Flatlist {...flatlistProps} />

方法二

条件渲染：

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

【讨论】：

columnWrapperStyle 的 ... 中应该包含什么：...，如果我在那里使用我的样式，我会收到错误。
应该是：{ justifyContent: "space-evenly" }你得到的错误是什么？

【解决方案3】：

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

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

【讨论】：