1

我正在使用react-jsx-parser npm 包，我有以下代码：

生成器.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} />;
}

但这不起作用，我在下面得到错误，我做了一些研究，找不到任何解决方案。

错误

4

2 回答 2

1

指定您的data，因为现在 data 未定义，并且map仅适用于数组！

于 2021-07-19T11:10:05.093 回答
1

你data可以顺利通过。如果将const 更改为以下内容，a它将正确显示：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>
  ))
}}

这是演示的代码框

于 2021-07-19T11:56:47.150 回答