ReactJS 决定使用哪个组件答案

【问题标题】：ReactJS decide which component to useReactJS 决定使用哪个组件
【发布时间】：2021-10-17 02:33:27
【问题描述】：

目前我有这个代码：

     {
      results && (
        isMultiple
          ? _.map(results, (itemData) => (<ItemMultiple
            key={itemData.key}
            data={itemData}
            loading={loading}
          />))
          : _.map(results, (itemData) => (<Item
            key={itemData.key}
            data={itemData}
            loading={loading}
          />))
      )
    }

如果您看到 ItemMultiple 和 Item 组件的道具名称相同。

我如何编写该代码才能不重复所有道具的定义，而只切换这 2 个 Item 组件中的一个？

【问题讨论】：

你可以分开返回语句并做：returnComponent = isMultiple ? ItemMultiple : Item; 然后用道具返回你的组件

标签： reactjs ecmascript-6

【解决方案1】：

您可以将道具存储在这样的对象中：

const myProps = {
    key: itemData.key,
    data: itemData,
    loading: loading,
}

然后像这样使用扩展运算符：

{
      results && (
        isMultiple
          ? _.map(results, (itemData) => (<ItemMultiple {...myProps} />))
          : _.map(results, (itemData) => (<Item {...myProps} />))
      )
    }

【讨论】：