dompurify__WEBPACK_IMPORTED_MODULE_6___default.a.sanitize不是一个函数，Next.js DOMPurify.sanitize()显示TypeError
dompurify__WEBPACK_IMPORTED_MODULE_6___default.a.sanitize不是一个函数，Next.js DOMPurify.sanitize()显示TypeError
提问于 2021-01-10 02:16:02
我在dangerouslySetInnerHTML={{}}中使用DOMPurify.sanitize()来显示从数据库返回的innerHtml。最初的目的是在这个页面上使用带有next-redux-wrapper的getServersideProps()。
我用：npm i -S dompurify安装了dompurify，目前的版本是："^2.2.6“。
我的代码：
import DOMPurify from 'dompurify';
import { useSelector } from 'react-redux';
import { END } from 'redux-saga';
import wrapper from '../redux/storeSetup';
const EmployeePage = () => {
const blog = useSelector(state => state.data);
const html_body = blog[0].body_html;
const clean = DOMPurify.sanitize(html_body);
return(
<div className="mainContainer">
<div dangerouslySetInnerHTML ={{ __html: clean }} />
<ul>
{blog.map((item) => (
<li key={item.author}>
<span>{item.author}</span><br/>
<span>{item.title}</span>
<h4>{item.body_delta}</h4>
<p>{item.body_html}</p>
<p>{item.created_on}</p>
</li>
))}
</ul>
</div>
);
}
export const getServerSideProps = wrapper.getServerSideProps( async ({store}) => {
store.dispatch({type: GET_DATA});
store.dispatch(END);
await store.sagaTask.toPromise();
});
export default EmployeePage;但是当我用npm run dev运行它时，我得到了这个错误：TypeError: dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function。
这里出了什么问题？我尝试使用更简单的代码，但所有代码都显示相同的错误！我做错了什么？
回答 5
Stack Overflow用户
发布于 2021-03-25 20:06:15
它可以在服务器端和浏览器上渲染
Stack Overflow用户
发布于 2021-01-10 02:21:06
根据这个：https://github.com/cure53/DOMPurify/issues/29#issuecomment-466626162
尝试执行以下操作(来自上面的示例)：
import { JSDOM } from 'jsdom'
import DOMPurify from 'dompurify'
const { window } = new JSDOM(html_body);
const domPurify = DOMPurify(window);
console.log(domPurify.sanitize(html_body));Stack Overflow用户
发布于 2021-01-14 15:31:00
我找到了一个可行的解决方案:不是在服务器端清理innerHtml，而是在提交富文本博客(在我的例子中是react-quill )之后立即在客户端清理它
import dynamic from 'next/dynamic'
import {useState} from 'react'
import DOMPurify from 'dompurify';
const QuillNoSSRWrapper = dynamic(import('react-quill'), {
ssr: false,
loading: () => <p>Loading...</p>,
})
// quill modules definitions
//...
export default function articles() {
const [text, setText] = useState(preData);
function handleTextChange(content, delta, source, editor) {
//let str = JSON.stringify(editor.getContents());
//let parsed = JSON.parse(str)
setText(editor.getContents());
const cleaned = DOMPurify.sanitize(editor.getHTML());
console.log('Cleaned Html: ', cleaned);
return (
<div className="quill_container">
<div id="editor" className="editor">
<QuillNoSSRWrapper
id="quilleditor"
modules={modules}
formats={formats}
theme="snow"
value={text}
onChange={handleTextChange}
/>
</div>
</div>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65646007
复制相关文章
相似问题
腾讯云开发者
