时间戳

首页 > 解决方案 > 对象对象作为悬停时元素的标题

javascript - 对象对象作为悬停时元素的标题

问题描述

我有一个手风琴元素，用于在页面上显示许多常见问题解答。在页面上显示带有内容的手风琴的代码如下：

         {
          Object.keys(FAQS).map((key, index) => {
            return (
              <div key={key}>
                <InputLabel display='block' ml='.5rem' mb='1rem' mt='2rem' active>{FAQS[index].section.toUpperCase()}</InputLabel>
                {
                  FAQS[index].questions.map((question, i) => {
                    return (
                      <Accordion key={i}
                        panelIndex={i}
                        p='1rem' j
                        icon={<PlusIcon w='1.2rem' h='1rem' color={colors.purple} />}
                        bg={i % 2 ? colors.white : colors.greyBg}
                        title={<Paragraph semiBold font={Theme.fonts.family.primary}>{question.question.toUpperCase()}</Paragraph>}
                        content={<Paragraph>{question.answer}</Paragraph>} />
                    );
                  })
                }
              </div>
            );
          })
        }

问题是当我将鼠标悬停在手风琴标题上时，我看到该标题被评估为[Object Object]而不是页面的正确标题，即使正确的标题显示给访问该页面的用户也是如此。

下面是我所看到的图像...... 在此处输入图像描述

请帮忙

问题的结构是：

[
  {
    section: 'General FAQs',
    questions: [
      {
        question: 'I',
        answer: '',
      },
      {
        question: '',
        answer: '',
      }
}]

它在 DOM 上生成以下元素：

<div class="Accordion__HeaderContainer-ue81ns-0 bipqoo" icon="[object Object]" title="[object Object]" content="[object Object]"><div class="Accordion__Header-ue81ns-1 cFDepz"><p class="Paragraph-gm6ys1-0 fjMUUV">I HAVEN'T WORKED OUT IN A LONG TIME? CAN I STILL DO THE WORKOUT?</p></div><div class="Accordion__IconContainer-ue81ns-2 fWwQcE"><svg xmlns="http://www.w3.org/2000/svg" class="Icon-s8tlf2e-0 jkSJcy" viewBox="0 0 16 16"><path fill="#5955dc" d="M15.02 6.8c.168 0 .3.048.396.144.096.096.144.228.144.396v1.908c0 .168-.048.3-.144.396-.096.096-.228.144-.396.144H9.584c-.12 0-.18.06-.18.18v5.328c0 .168-.048.3-.144.396-.096.096-.228.144-.396.144H6.956c-.168 0-.3-.048-.396-.144-.096-.096-.144-.228-.144-.396V9.968c0-.12-.06-.18-.18-.18H.8c-.168 0-.3-.048-.396-.144C.308 9.548.26 9.416.26 9.248V7.34c0-.168.048-.3.144-.396C.5 6.848.632 6.8.8 6.8h5.436c.12 0 .18-.06.18-.18V1.076c0-.168.048-.3.144-.396.096-.096.228-.144.396-.144h1.908c.168 0 .3.048.396.144.096.096.144.228.144.396V6.62c0 .12.06.18.18.18h5.436z"></path></svg></div></div>

所以基本上我需要正确处理icon="[object Object]" title="[object Object]" content="[object Object]">以呈现为正确的字符串而不是对象

标签： javascriptarraysreactjs

解决方案

首先，您需要检查 propstitle和contentin component Accordion。

title 属性指定有关元素的额外信息。当鼠标移到元素上时，该信息通常显示为工具提示文本。title 属性可以用于任何 HTML 元素（它将在任何 HTML 元素上验证。但是，它不一定有用）。

参考：https ://www.w3schools.com/tags/att_global_title.asp

推荐阅读