Question

我的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>
    );
  });

有什么建议吗？

Answer 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>
    );
});

Answer 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}
)

Answer 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>
    );
  });

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

3 个答案: