You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+35-14Lines changed: 35 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -68,11 +68,36 @@ ReactDOM.render(
68
68
69
69
### Options
70
70
71
-
#### replace(domNode)
71
+
#### replace(domNode, key)
72
72
73
-
`replace` allows you to swap an element with your own React element.
73
+
The `replace` method allows you to swap an element with your own React element.
74
74
75
-
The `domNode` object has the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
75
+
The method has 2 parameters:
76
+
1.`domNode`: An object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
77
+
2.`key`: A number to keep track of the element. You should set it as the ["key" prop](https://fb.me/react-warning-keys) in case your element has siblings.
78
+
79
+
```js
80
+
Parser('<p id="replace">text</p>', {
81
+
replace:function(domNode, key) {
82
+
console.log(domNode);
83
+
// { type: 'tag',
84
+
// name: 'p',
85
+
// attribs: { id: 'replace' },
86
+
// children: [],
87
+
// next: null,
88
+
// prev: null,
89
+
// parent: null }
90
+
91
+
console.log(key); // 0
92
+
93
+
return;
94
+
// element is not replaced because
95
+
// a valid React element is not returned
96
+
}
97
+
});
98
+
```
99
+
100
+
Working example:
76
101
77
102
```js
78
103
var Parser =require('html-react-parser');
@@ -81,18 +106,14 @@ var React = require('react');
81
106
var html ='<div><p id="main">replace me</p></div>';
82
107
83
108
var reactElement =Parser(html, {
84
-
replace:function(domNode) {
85
-
// example `domNode`:
86
-
// { type: 'tag',
87
-
// name: 'p',
88
-
// attribs: { id: 'main' },
89
-
// children: [],
90
-
// next: null,
91
-
// prev: null,
92
-
// parent: [Circular] }
109
+
replace:function(domNode, key) {
93
110
if (domNode.attribs&&domNode.attribs.id==='main') {
94
-
// element is replaced only if a valid React element is returned
0 commit comments