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

【问题标题】：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>
    );
  });

有什么建议吗？

【问题讨论】：

标签： javascript reactjs jsx conditional-rendering

【解决方案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>
    );
  });

【讨论】：