我正在尝试在当前项目中安装 npm install react-html-parser 。所以我尝试安装 npm install react-html-parser 但在使用命令之后。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
PS D:\Ecommerce\user\ecom> npm install react-html-parser
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from [email protected]
npm ERR! node_modules/react-html-parser
npm ERR! react-html-parser@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\hp\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hp\AppData\Local\npm-cache\_logs\2022-02-19T13_09_05_987Z-debug-0.log
这是我的包json文件
{
"name": "ecom",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"is-buffer": "^2.0.5",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-transition": "^2.1.0",
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-toastify": "^8.2.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我不明白我能做什么。请帮我找到解决方案。任何形式的帮助将不胜感激。预先感谢您。
这是我在下面找到的解决方案答案
这个想法是将
react-html-parserhtml-react-parserimport parse from "html-react-parser";
...
{parse("<HTML string>")}
...
而不是使用 react-html-parser，为什么不使用 html-react-parser ？
react-html-parserhmtl-react-parserreact-html-parser 的最后一个版本似乎是 4 年前。
如果您不需要 React 版本 17 中的任何内容，如果您确实想在项目中使用 React-html-parser，我会根据您的情况选择版本 16。查看react-html-parser包的对等依赖关系告诉我们，它不适用于react 17。
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
}
这是一个 package.json 文件，其中 React 和 ReactDOM 版本也相应更改。为了简单起见。
{
"name": "ecom",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"is-buffer": "^2.0.5",
"react": "^16.8.0",
"react-bootstrap": "^2.1.1",
"react-dom": "^16.14.0",
"react-html-parser": "^2.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-transition": "^2.1.0",
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-toastify": "^8.2.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
如果您确实想要 React 17 和 html-react-parser 并禁用推荐的保护，您还可以在运行 npm install 时使用 --force 标志。
npm install react-html-parser --force
react-html-parserhtml-react-parsernpm install html-react-parser --save
import parse from 'html-react-parser'
parse('<body><p>Lorem ipsum</p></body>')
我在反应版本“react”中遇到了同样的问题：“^18.1.0”， 我已经使用解决了这个问题
npm install react-html-parser --legacy-peer-deps对于那些仍然被这个问题困扰的人：
我们可以依赖而不是使用那个包
dangerouslySetInnerHTML <div className="" dangerouslySetInnerHTML={{__html:'<div className="text-red"><p>My HTML Content</p></div>'}}