根据功能组件中的数据有条件地渲染元素

Posted 2023-02-22

【中文标题】根据功能组件中的数据有条件地渲染元素

【英文标题】：Conditionally render elements based on data in functional component

【发布时间】：2020-04-27 08:36:08

【问题描述】：

我的 React 应用程序中有一个功能组件，它进行 API 调用并返回包含两种联系方式 Phone Number 和 Email 的响应，并将它们显示在他们的旁边相应的图标。

有些回复可能只有一种或另一种联系方式，也可能没有。

如果响应没有列出联系方式，我仍然希望显示图标并将“--”放在数据所在的位置。

这是我第一次尝试写出一些快速的三元方法的逻辑，但现在每行呈现的都是[object Object][object Object]

  let renderContactDetails = methods.map(method => 

    return (
      <div>
        
          method.contactMethodType === "M" ? `$<span><PhoneSvg /> method.number</span>` : `$<span><PhoneSvg /> -- </span>`
        
        
          method.contactMethodType === "E" ? `$<span><AtSymbolSvg /> method.emailAddress</span>` :  `$<span><AtSymbolSvg /> -- </span>`
        
      </div>
    );
  );

有什么建议吗？

【参考方案1】：

你只需要在模板字面量中定义 javascript 并让 JSX 像这样为你转换 html 标签：

let renderContactDetails = methods.map(method => 

const number = method.contactMethodType === "M" ? `$method.number` : `--`;
const email = method.contactMethodType === "E" ? `$method.emailAddress` : `--`;
    
    return (
      <div>
        <span><PhoneSvg /> number</span>
        <span><PhoneSvg /> email</span>
      </div>
    );
);

【讨论】：

@PedroMutter 而且它将逻辑排除在 JSX 之外，这通常是一种很好的做法。

【参考方案2】：

您将模板字符串与 jsx 语法混为一谈。做吧：

  let renderContactDetails = methods.map(method => 

    return (
      <div>
        
          method.contactMethodType === "M" ? <span><PhoneSvg /> method.number</span> : <span><PhoneSvg /> -- </span>
        
        
          method.contactMethodType === "E" ? <span><AtSymbolSvg /> method.emailAddress</span> : <span><AtSymbolSvg /> -- </span>
        
      </div>
    );
  );

然后渲染它。

return (
   renderContactDetails
)

【参考方案3】：

您不需要将所有内容包装在一个字符串中，即让您的组件调用toString() 方法，变成[object Object]。尝试做这样的事情：

let renderContactDetails = methods.map(method => 

    return (
      <div>
        
          method.contactMethodType === "M" ? 
            <span><PhoneSvg /> method.number</span> :
            <span><PhoneSvg /> -- </span>
        
        
          method.contactMethodType === "E" ?
           <span><AtSymbolSvg /> method.emailAddress</span> :
           <span><AtSymbolSvg /> -- </span>
        
      </div>
    );
  );