/
combined.html
51 lines (40 loc) · 2.01 KB
/
combined.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const MyContext = React.createContext()
const ThemeContext = React.createContext()
const CombinedContextProvider = ({greeting, color, children}) => <MyContext.Provider value={greeting}>
<ThemeContext.Provider value={color}>
{children}
</ThemeContext.Provider>
</MyContext.Provider>
const CombinedContextConsumer = ({children}) => (<MyContext.Consumer>
{greeting => <ThemeContext.Consumer>
{color => children({greeting, color})}
</ThemeContext.Consumer>
}
</MyContext.Consumer>)
const OuterComponent = () => (<div><MiddleComponent/></div>)
const MiddleComponent = () => (<div><InnerComponent/></div>)
const InnerComponent = () => (
<CombinedContextConsumer>
{({greeting, color}) => <div style={{color:color}}>Hello {greeting}</div>}
</CombinedContextConsumer>
)
const root = <CombinedContextProvider greeting="world" color="red">
<OuterComponent/>
</CombinedContextProvider>
ReactDOM.render(root, document.getElementById('root'))
</script>
</body>
</html>