Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2082136

Browse files
done with react-portals 👋
1 parent e24a17a commit 2082136

File tree

6 files changed

+94
-37
lines changed

6 files changed

+94
-37
lines changed

‎.DS_Store

2 KB
Binary file not shown.

‎react-portals/public/index.html

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<!--
1917
Notice the use of %PUBLIC_URL% in the tags above.
2018
It will be replaced with the URL of the `public` folder during the build.
2119
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
2422
work correctly both with client-side routing and a non-root public URL.
2523
Learn how to configure a non-root public URL by running `npm run build`.
2624
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
25+
<title>React App</title>
26+
</head>
27+
28+
<body>
29+
<noscript>You need to enable JavaScript to run this app.</noscript>
30+
<div id="root"></div>
31+
<div id="portal-root"></div>
32+
<!--
3333
This HTML file is a template.
3434
If you open it directly in the browser, you will see an empty page.
3535
@@ -39,5 +39,6 @@
3939
To begin the development, run `npm start` or `yarn start`.
4040
To create a production bundle, use `npm run build` or `yarn build`.
4141
-->
42-
</body>
43-
</html>
42+
</body>
43+
44+
</html>

‎react-portals/src/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,9 @@
2020
.App-link {
2121
color: #09d3ac;
2222
}
23+
24+
25+
26+
#portal-root {
27+
margin: 2em;
28+
}

‎react-portals/src/App.js

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
11
import React from 'react';
2-
import logo from './logo.svg';
32
import './App.css';
3+
import CounterWithPortal from './Components'
4+
5+
/**
6+
* Generally, React renders the component as a child to the parent in which it is used.
7+
* Whereas, portals in react gives developer an advantage to add a component outside the current DOM hierarchy by maintaining the event bubbling and state management.
8+
*/
49

510
function App() {
611
return (
712
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
13+
<h2>React Protals 👋</h2>
14+
<CounterWithPortal></CounterWithPortal>
2215
</div>
2316
);
2417
}

‎react-portals/src/Components/index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { Component } from 'react';
2+
import ReactDom from 'react-dom';
3+
4+
/*
5+
export default class CounterWithoutPortal extends Component {
6+
constructor(props) {
7+
super(props);
8+
9+
this.state = {
10+
count: 0,
11+
};
12+
}
13+
14+
incrementCount = () => {
15+
this.setState({
16+
count: this.state.count + 1,
17+
});
18+
}
19+
20+
render() {
21+
return (
22+
<div>
23+
The count is {this.state.count}
24+
<br></br>
25+
<button onClick={this.incrementCount}>Increment Count</button>
26+
</div>
27+
)
28+
}
29+
}
30+
31+
*/
32+
33+
const root = document.getElementById('portal-root');
34+
export default class CounterWithPortal extends React.Component {
35+
constructor(props) {
36+
super(props);
37+
this.state = {
38+
count: 0,
39+
};
40+
}
41+
42+
incrementCount = () => {
43+
this.setState({
44+
count: this.state.count + 1,
45+
});
46+
}
47+
48+
render() {
49+
return ReactDom.createPortal(
50+
<div>
51+
The count is {this.state.count}.
52+
<br></br>
53+
<button onClick={this.incrementCount}>Increment Count</button>
54+
</div>,
55+
root
56+
)
57+
}
58+
}

‎react-portals/src/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /