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

Question

我的 React 应用程序中有一个功能组件，它发出 API 调用并返回具有两种联系方式的响应 Phone Number 和 发送电子邮件并将它们显示在各自的图标旁边。

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

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

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

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

Conditionally render elements based on data in functional component

javascript

jsx

reactjs

conditional-rendering