Reactjs 如何将动态id和动态切换程序传递给Reactstrap的UncontrolledCollapse标记？

折叠不带模板字符串

{
    state.data.map(datum => {
        return (
            <>
                <Card id={`toggler${datum._id}`} className="mb-1 shadow-sm" >
                   <CardBody>
                       <div dangerouslySetInnerHTML={{ __html: datum.faqHeading }} /> 
                   </CardBody>
                </Card>
                <UncontrolledCollapse toggler=`toggler${datum._id}`>
                    <Card>
                        <CardBody  >
                            <div dangerouslySetInnerHTML={{ __html: datum.faqBody }} />
                        </CardBody>
                    </Card>
                </UncontrolledCollapse>
            </>
        )
    })
}

{
state.data.map（数据=>{
返回(
)
})
}

或者有没有其他方法来实现这一目标？

---

数据来自API。根据该数据（卡片数量），将呈现卡片

当您在JSX的作用域中时，您必须将其包装在

{}

中，例如，

prop={`${variable}-一些其他字符串`}

不过，我想你也会想读的。似乎Reactstrap实际上使用了

querySelectorAll

，因此，如果您的

id

&

切换器（我怀疑您有）只有数字，它将不起作用。您需要确保您的
数据。_id
至少包含一个字母作为其第一个字符，而不是数字。满足该前提条件后，以下语法应足够：

toggler={datum._id}

来自
API
的数据可能是对象的数组
[{}，{}，{}]
。如果您可以控制从
API
返回的数据，则可以添加一个用于id的唯一字符串。通过这种方式，您可以放弃使用模板文本，而使用一个简单的
id

我认为
datum.\u id
是作为
mongodb
的文档提供的。不要使用
\u id
来区分您案例中的卡片，而是根据卡片类型为每个对象设置一个id，然后使用它。例如，您自己的
id
，而不是mongodb的
\u id

<Card>
  <CardBody>
     <div dangerouslySetInnerHTML={{ __html: datum.faqBody }}/>
  </CardBody>
</Card>

DOM净化库：

function createMarkup() {
  // Purify HTML here and return 
};

<div dangerouslySetInnerHTML={createMarkup()} />