Pulse Of The Blogosphere » ReactJS – 4. useContext: createContext, Provider, Consumer

HOME / Javascript / ReactJS old / ReactJS – 4. useContext: createContext, Provider, Consumer

ReactJS – 4. useContext: createContext, Provider, Consumer

Author: admin - Posted: 01/05/21 - Update: 05/08/22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReactJS</title>
</head>

<body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        const { useState, useContext, createContext } = React

        //Khởi tạo Context, với giá trị mặc định là "default-value"
        const MyContext = createContext('default-value')

        //Component không được bọc trong 'MyContext' chỉ có thể sử dụng giá trị mặc định
        const Header = () => {
            const context = useContext(MyContext)
            return <h3>Header: {context}</h3>
        }

        // Component được bọc trong 'Provider' thì sử dụng useContext
        const Main = () => {
            const { number, setNumber } = useContext(MyContext)
            return (
                <div>
                    <h3>Main Number: {number}</h3>
                    <button onClick={() => setNumber(number + 1)}>Number++</button>
                </div>
            )
        }

        // Component được bọc trong 'Consumer' thì sử dụng như Props
        const Footer = ({ context }) => {
            return (
                <div>
                    <h3>Footer Number {context.number}</h3>
                    <button onClick={() => context.setNumber(context.number + 1)}>Number++</button>
                </div>
            )
        }

        const App = () => {
            const [number, setNumber] = useState(1)
            return (
                <div>
                    <Header /> {/* Khi không có Provider bên ngoài sẽ chỉ nhận giá trị context mặc định */}
                    <MyContext.Provider value={{ number, setNumber }}>
                        {/* Component con cháu bên trong Provider đều nhận được context thông qua useContext */}
                        <Main />

                        {/* Khi dùng consumer thì bên trong nó là: Function as Child Component */}
                        {/* Nghĩa là dùng context như một props luôn */}
                        <MyContext.Consumer>
                            {({ number, setNumber }) => <Footer context={{ number, setNumber }} />}
                        </MyContext.Consumer>
                    </MyContext.Provider>
                </div>
            )
        }

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

const { useState, useContext, createContext } = React

//Khởi tạo Context, với giá trị mặc định là "default-value"

const MyContext = createContext('default-value')

//Component không được bọc trong 'MyContext' chỉ có thể sử dụng giá trị mặc định

const Header = () => {

const context = useContext(MyContext)

return <h3>Header: {context}</h3>

}

// Component được bọc trong 'Provider' thì sử dụng useContext

const Main = () => {

const { number, setNumber } = useContext(MyContext)

return (

<div>

<h3>Main Number: {number}</h3>

<button onClick={() => setNumber(number + 1)}>Number++</button>

</div>

)

}

// Component được bọc trong 'Consumer' thì sử dụng như Props

const Footer = ({ context }) => {

return (

<div>

<h3>Footer Number {context.number}</h3>

<button onClick={() => context.setNumber(context.number + 1)}>Number++</button>

</div>

)

}

const App = () => {

const [number, setNumber] = useState(1)

return (

<div>

<Header /> {/* Khi không có Provider bên ngoài sẽ chỉ nhận giá trị context mặc định */}

<MyContext.Provider value={{ number, setNumber }}>

{/* Component con cháu bên trong Provider đều nhận được context thông qua useContext */}

{/* Khi dùng consumer thì bên trong nó là: Function as Child Component */}

{/* Nghĩa là dùng context như một props luôn */}

<MyContext.Consumer>

{({ number, setNumber }) => <Footer context={{ number, setNumber }} />}

</MyContext.Consumer>

</MyContext.Provider>

</div>

)

}

ReactDOM.render(<App />, document.getElementById('app'))

</script>

</body>

</html>

ReactJS old

ReactJS – 9. Higher-Order Components (HOC)