Question

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

         {
          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]">才能呈现为正确的字符串而不是对象

对象对象作为悬停元素的标题

0 个答案: