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

Question

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。根据该数据（卡片数量），将呈现卡片！

Answer 1

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

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

toggler={datum._id}

Answer 2

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

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

的 _id

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

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

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

<div dangerouslySetInnerHTML={createMarkup()} />

用于 DOM 纯化的库：DOM Purify

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

How to pass dynamic id and hence dynamic toggler to UncontrolledCollapse tag of Reactstrap?

reactjs

bootstrap-4

reactstrap