Hướng dẫn dùng html-react-parser JavaScript
replaceThe The parse(' Console output: Element { type: 'tag', parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [], name: 'br', attribs: {} } The element is replaced if a valid React element is returned: parse(' replace with TypeScriptFor TypeScript projects, you may need to check that import { HTMLReactParserOptions, Element } from 'html-react-parser'; const options: HTMLReactParserOptions = { replace: domNode => { if (domNode instanceof Element && domNode.attribs) { // ... } } }; If you're having issues take a look at our Create React App example. replace element and childrenReplace the element and its children (see demo): import parse, { domToReact } from 'html-react-parser'; const html = ` keep me and make me pretty! `; const options = { replace: ({ attribs, children }) => { if (!attribs) { return; } if (attribs.id === 'main') { return <h2 style={{ fontSize: 42 }}>{domToReact(children, options)}</h2>; } if (attribs.class === 'prettify') { return ( <span style={{ color: 'hotpink' }}> {domToReact(children, options)} </span> ); } } }; parse(html, options); HTML output: <h2 style="font-size:42px"> <span style="color:hotpink"> keep me and make me pretty! span> h2> replace element attributesConvert DOM attributes to React props with import parse, { attributesToProps } from 'html-react-parser'; const html = ` `; const options = { replace: domNode => { if (domNode.attribs && domNode.name === 'main') { const props = attributesToProps(domNode.attribs); return <div {...props} />; } } }; parse(html, options); HTML output: <div class="prettify" style="background:#fff;text-align:center">div> replace and remove elementExclude an element from rendering by replacing it with parse(' HTML output: libraryThe To use Preact: parse(' Or a custom library: parse(' htmlparser2
Default htmlparser2 options can be overridden in >=0.12.0. To enable
parse('', { htmlparser2: { xmlMode: true } }); trimBy default, whitespace is preserved: parse(' But certain elements like To remove whitespace, enable the However, intentional whitespace may be stripped out: domhandler has been upgraded to v5 so some parser options like Since v2.0.0, Internet Explorer (IE) is no longer supported. TypeScript projects will need to update the types in v1.0.0. For the Since v1.1.1, Internet Explorer 9 (IE9) is no longer supported. No, this library is not
XSS (cross-site scripting) safe. See #94. No, this library does not sanitize HTML. See #124,
#125, and #141. If your elements are nested incorrectly, check to make sure your
HTML markup is valid. The HTML to DOM parsing will be affected if you're using self-closing syntax ( See #158. Tags are lowercased by default. To prevent that from happening, pass the
htmlparser2 option: Warning: By preserving case-sensitivity of the tags, you may get rendering warnings like: See #62 and example. The TypeScript error occurs because Yes, you can enable or disable
If you see the Webpack build warning: Then update your Webpack config to: See #238 and #213. Run benchmark: Output of benchmark run on MacBook Pro 2017: Run Size Limit: This project exists thanks to all the people who contribute. [Contribute]. Become a financial contributor and help us sustain our community. [Contribute] Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
Available as part of the Tidelift Subscription. The maintainers of html-react-parser and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source packages you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact packages you use.
Learn more. MIT Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmToplist được quan tâm#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 20235 tháng trước#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 20235 tháng trước#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 20235 tháng trước#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 20235 tháng trước#6
Top 7 hãy ra khỏi người đó đi hợp âm 20235 tháng trước#7
Top 6 giáo án thơ về thăm nhà bác 20235 tháng trước#8
Top 8 giáo án ngữ văn 6 cánh diều 20235 tháng trước#9
Top 9 tinh bột tham gia phản ứng nào 20235 tháng trướcQuảng cáoXem NhiềuQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Hàng Hiệu Inc.
|