react-jsx-parser 无法映射内容

Esc 官方

我正在使用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可以顺利通过。如果你改变了a一个const,以下面,将显示ab正确:

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

这是演示的代码和框

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章