javascript - 在映射数据上显示对象的 dangerouslySetInnerHTML

Question

我尝试从 GraphQL 数据中获取一些值。然后，我想通过
<div dangerouslySetInnerHTML={{ __html: ExtendedProfileShow }} />

然后，我得到了[object Object],[object Object],[object Object]。

这是我的代码：

错误文件：

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
          <div dangerouslySetInnerHTML={{ __html: ExtendedProfileShow }} />
        </>
    );
}

我的 api.js：

export async function getAllBusinessProfiles() {
    const data = await fetchAPI(
      `
      query AllProfiles {
        businessProfiles(where: {orderby: {field: DATE, order: ASC}}) {
          edges {
            node {
              date
              title
              slug
              link
              uri
              businessInfo {
                name
                title
                company
                image {
                  mediaItemUrl
                  altText
                }
                highlight
                phone
                city
                country
                facebook
                linkedin
                instagram
                email
                website
                profiles {
                  profile
                  profileInfo
                }
                extendedProfile {
                  title
                  info
                }
              }
            }
          }
        }
      }
      
      `
    );
    return data?.businessProfiles;
};

数据具有 HTML 元素，例如 -<p> Test test </p>并且预计也会执行标签。

这里可能是什么错误？谢谢。

Answer 1

在这种情况下，甚至不需要使用dangerouslySetInnerHTML. 您可以直接传递您生成的 JSX。

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
            <div>{ExtendedProfileShow}</div>
        </>
    );
}

但是，如果出于某种原因您真的想使用dangerouslySetInnerHTML，您可以使用ReactDOMServer.renderToStaticMarkup将您的 JSX 转换为字符串。

import ReactDOMServer from 'react-dom/server'

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
            <div dangerouslySetInnerHTML={{
                __html: ReactDOMServer.renderToStaticMarkup(ExtendedProfileShow)
            }} />
        </>
    );
}