如何将动态 id 和动态切换器传递给 Reactstrap 的 UncontrolledCollapse 标签？答案

【问题标题】：How to pass dynamic id and hence dynamic toggler to UncontrolledCollapse tag of Reactstrap?如何将动态 id 和动态切换器传递给 Reactstrap 的 UncontrolledCollapse 标签？
【发布时间】：2021-01-08 16:54:28
【问题描述】：

Reactstrap Uncontrolled Collapse 不接受模板字符串！

{
    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>
            </>
        )
    })
}

或者还有其他方法可以实现吗？数据来自 API。根据该数据（卡片数量），将呈现卡片！

【问题讨论】：

标签： reactjs bootstrap-4 reactstrap

【解决方案1】：

当您在 JSX 范围内时，您必须将其包装在 {} 中，例如 prop={`${variable}-some-other-string`}

但是，我认为您还想阅读this question。似乎 Reactstrap 实际上使用了querySelectorAll，所以如果你只有id 和toggler 的数字（我怀疑你有），它就行不通了。您需要确保您的 datum._id 至少包含一个字母作为其第一个字符，而不是数字。满足该先决条件后，以下语法就足够了：

toggler={datum._id}

【讨论】：

【解决方案2】：

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

我认为datum._id 是来自mongodb 的文档。不要使用_id 来区分您的情况下的卡片，而是根据卡片类型为每个对象设置一个id，然后使用它。比如你自己的id而不是mongodb的_id。

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

其次，我可以看到您使用的是dangerouslySetInnerHTML。不正确使用此功能可能会使您面临跨站脚本 (XSS) 攻击，因为您正在做的是来自 api 的 datum.faqBody 可能有一个包含一些恶意代码的 script 标记可以执行您的网站导致XSS 攻击。在像这样设置之前，请确保为 HTML 调用了一些消毒功能。

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

<div dangerouslySetInnerHTML={createMarkup()} />

DOM 净化库：DOM Purify

【讨论】：