如何执行返回类型为jsx.Element的函数的字符串

Question

在jsx文件中执行下述代码，报错SyntaxError: Unexpected token '<'

let func_a = "(x, y) => { return <div>{x + y}</div> }"
eval(func_a)

或者有其他执行jsx表达式的方法吗？

Answer 1

x = 5, y = 10;
eval(`a = document.createElement('div');a.innerText=${x + y};`);
console.log(a);

eval是js方法而不是React函数，所以不能接受你那种写法。

Answer 2

有以下几个概念：

1. eval是js方法，由运行在浏览器中的js引擎来解析
2. jsx 不是ECMAScript的标准，所以对于运行在浏览器中的js引擎来讲，jsx是不可识别的。jsx的解析是有React团队提供的解析器来处理的。

那么，如何处理字符串的 JSX.Element 呢？

第一种方式：dangerouslySetInnerHTML

function TestStr(x, y) {
  return `<div>${x + y}</div>`;
}
export default function App() {
  return (
    <div className="App">
      <div dangerouslySetInnerHTML={{__html: TestStr(3, 4)}} />
    </div>
  );
}

第二种方式：renderToString

import { renderToString } from "react-dom/server";

function TestStr(x, y) {
  return `<div>${x + y}</div>`;
}

export default function App() {
  const textHtml = renderToString(TestStr(1, 2));
  console.log(textHtml);
  return (
    <div className="App">
      <div>{textHtml}</div>
    </div>
  );
}