我有一个脚本,它读取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 ,它就会将所有内容都小写。我该如何解决这个问题???
最佳答案
您遇到的错误真的很奇怪,我可以通过导入 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。
关于javascript - renderToString 使文件的每个字符都小写,因此无法渲染,如何解决此问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57450881/