Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 996075f

Browse files
authoredMar 19, 2022
[18] Upgrade homepage examples (#4469)
1 parent a8b7d52 commit 996075f

File tree

5 files changed

+15
-22
lines changed

5 files changed

+15
-22
lines changed
 

‎content/home/examples/a-component-using-external-plugins.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,4 @@ class MarkdownEditor extends React.Component {
3636
}
3737
}
3838

39-
ReactDOM.render(
40-
<MarkdownEditor />,
41-
document.getElementById('markdown-example')
42-
);
39+
root.render(<MarkdownEditor />);
Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
class HelloMessage extends React.Component {
22
render() {
3-
return (
4-
<div>
5-
Hello {this.props.name}
6-
</div>
7-
);
3+
return <div>Hello {this.props.name}</div>;
84
}
95
}
106

11-
ReactDOM.render(
12-
<HelloMessage name="Taylor" />,
13-
document.getElementById('hello-example')
14-
);
7+
root.render(<HelloMessage name="Taylor" />);

‎content/home/examples/a-stateful-component.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,4 @@ class Timer extends React.Component {
2727
}
2828
}
2929

30-
ReactDOM.render(
31-
<Timer />,
32-
document.getElementById('timer-example')
33-
);
30+
root.render(<Timer />);

‎content/home/examples/an-application.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,4 @@ class TodoList extends React.Component {
6060
}
6161
}
6262

63-
ReactDOM.render(
64-
<TodoApp />,
65-
document.getElementById('todos-example')
66-
);
63+
root.render(<TodoApp />);

‎src/components/CodeEditor/CodeEditor.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,14 +248,23 @@ class CodeEditor extends Component {
248248

249249
_render() {
250250
const {compiled} = this.state;
251+
const {containerNodeID} = this.props;
252+
253+
// Until we upgrade Gatsby to React 18, fake the new root API.
254+
const root = {
255+
render: element => {
256+
ReactDOM.render(element, document.getElementById(containerNodeID));
257+
},
258+
};
251259

252260
try {
253261
// Example code requires React, ReactDOM, and Remarkable to be within scope.
254262
// It also requires a "mountNode" variable for ReactDOM.render()
255263
// eslint-disable-next-line no-new-func
256-
new Function('React', 'ReactDOM', 'Remarkable', compiled)(
264+
new Function('React', 'ReactDOM', 'root', 'Remarkable', compiled)(
257265
React,
258266
ReactDOM,
267+
root,
259268
Remarkable,
260269
);
261270
} catch (error) {

0 commit comments

Comments
 (0)
Please sign in to comment.