javascript - renderToString 使文件的每个字符都小写，因此无法渲染，如何解决此问题？

Question

我有一个脚本，它读取reactjs文件，然后使用renderToString将其渲染为html。但是 renderToString 使我的组件 className 和所有其他 pascalCased 导入都变成小写。因此我收到此错误:

Invariant violation: Invalid tag: import react, {component} from 'react' class app extends component {}

这是脚本:

const reactElement = require('react').createElement;
const ReactDomServer = require('react-dom/server');

const renderHTML = Component => {
  return ReactDomServer.renderToString(element(Component))
}

附注element(Component) 给了我一个应该的对象。但是一旦我将它传递给 renderToString ，它就会将所有内容都小写。我该如何解决这个问题？？？

Answer 1

您遇到的错误真的很奇怪，我可以通过导入 React 组件并将其呈现为纯文本来重现它(假设 reactElement() 和 element() 在你的代码中是同样的事情):

const renderHTML = component => {
  return ReactDOMServer.renderToString(reactElement(component));
}

app.get('/', (req, res) => {
  fs.readFile(path.join(__dirname, './YourElement.js'), (err, data) => {
    const fileContent = data.toString('utf-8');
    const output = renderHTML(fileContent);
    res.end(output);
  });
});

因此我得到了同样的错误(实际上它被转换为小写):

Invariant Violation: Invalid tag: const react = require('react');

这意味着您正在以纯文本形式导入组件。

确保将所有 React 组件导入为 JavaScript 模块:

const YourElement = require('./YourElement');
// or
import YourElement from './YourElement';

因此，renderToString() 会将所有内容正确转换为 HTML。