react-jsx-parser 无法映射内容
react-jsx-parser can't map content
我正在使用 react-jsx-parser npm 包并且我有这个代码:
Builder.tsx
import JsxParser from "react-jsx-parser";
export default function Builder() {
const a = `
<>
{data.map((el, i) => (
<div key={i}>{el}</div>
))}
</>
`;
return <JsxParser bindings={{ data: [1, 2] }} jsx={a} />;
}
但这行不通,我得到 下面的错误,我做了一些研究,但找不到任何解决方案。
指定您的 data,因为现在数据未定义,map 仅适用于数组!
您的data
可以顺利通过。如果将 a
const 更改为以下内容,它将正确显示 a
和 b
:
const a = `
{ data }
`;
在html中:
...
<div>
"a"
"b"
</div>
...
我认为该库不够智能,无法逐字解析函数,因为它可能需要额外的工作来解释和评估代码。
如果你像下面这样硬编码数组,它仍然会抛出同样的错误:
const a = `
{ ["a", "b"].map((d) => d)}
`;
所以为了得到你想要的,你可能需要在绑定部分处理和修饰数据。它可能是也可能不是你想要的:
bindings={{
data: ["a", "b"].map((el, i) => (
<div key={i}>
{el}
</div>
))
}}
我正在使用 react-jsx-parser npm 包并且我有这个代码:
Builder.tsx
import JsxParser from "react-jsx-parser";
export default function Builder() {
const a = `
<>
{data.map((el, i) => (
<div key={i}>{el}</div>
))}
</>
`;
return <JsxParser bindings={{ data: [1, 2] }} jsx={a} />;
}
但这行不通,我得到 下面的错误,我做了一些研究,但找不到任何解决方案。
指定您的 data,因为现在数据未定义,map 仅适用于数组!
您的data
可以顺利通过。如果将 a
const 更改为以下内容,它将正确显示 a
和 b
:
const a = `
{ data }
`;
在html中:
...
<div>
"a"
"b"
</div>
...
我认为该库不够智能,无法逐字解析函数,因为它可能需要额外的工作来解释和评估代码。 如果你像下面这样硬编码数组,它仍然会抛出同样的错误:
const a = `
{ ["a", "b"].map((d) => d)}
`;
所以为了得到你想要的,你可能需要在绑定部分处理和修饰数据。它可能是也可能不是你想要的:
bindings={{
data: ["a", "b"].map((el, i) => (
<div key={i}>
{el}
</div>
))
}}