react-jsx-parser 無法映射內容

Question

我正在使用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} />;
}

但這不起作用，我得到了下面的錯誤，我做了一些研究，但找不到任何解決方案。

Answer 1

指定您的數據，因為現在數據未定義並且映射僅適用於數組！

Answer 2

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

這是演示的代碼和框