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

Josh 发表于 Dev

乔希

我的React应用程序中有一个功能组件，该组件进行API调用，并返回包含两个联系方式（电话号码和电子邮件）的响应，并将其显示在各自的图标旁边。

某些响应可能只有一种或另一种联系方法，或者都不具有。

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

这是我第一次尝试编写一些快速的三元方法的逻辑，但是现在每一行呈现的所有内容都是 [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>
    );
  });

有什么建议？

安德鲁·L64

您只需要在模板文字中定义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>
    );
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。