ReactJS 中具有相同道具的组件的条件渲染答案

【问题标题】：Conditional Rendering of Components with Same Props in ReactJSReactJS 中具有相同道具的组件的条件渲染
【发布时间】：2019-09-15 16:17:32
【问题描述】：

我正在运行一个简单的条件测试，以查看要渲染的组件。如果条件为真，我渲染一个组件，假另一个组件。现在这就是我的代码的样子：

    {isPresent && (
        <FirstComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}
    {!isPresent && (
        <SecondComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}

我想知道的是我是否可以让这段代码更干一点。像这样的：

{isPresent && (
    <FirstComponent
        {propList}
    />
)}
{!isPresent && (
    <SecondComponent
        {propList}
    />
)}

propList 代表我想包含在每个组件中的所有道具。

这可能吗？如果有，怎么做？

谢谢。

【问题讨论】：

你如何决定 proplist 的价值？已经处理了还是需要根据 isPresent 处理？
props 值与isPresent 无关。

标签： javascript reactjs react-props react-component

【解决方案1】：

如果两个元素具有相同的属性，那么您可以将这些属性存储到一个常量中并将其传递给目标组件

function YourComponent(props) {
  const commonProps = {
      propOne: "value one",
      propTwo: "value two",
      ...props
   };

   const Component = isPresent ? FirstComponent : SecondComponent;
   return <Component {...commonProps}/>;
}

【讨论】：

谢谢 - 做到了。

【解决方案2】：

您可以在渲染中使用变量来定义要渲染的组件

 let Comp = isPresent ? FirstComponent : SecondComponent
 let propList = {
    propOne :"value one",
    propTwo : "value two",
    ...props
 }

那么在你的回报中你可以使用

 <Comp
   { propList }
 />

注意：-如果要为其分配组件，请始终使用首字母大写来命名变量，因为In JSX, lower-case tag names are considered to be HTML tags

【讨论】：

谢谢 - 非常感谢。