react使用useContext实现兄弟组件通信

两个兄弟input通信,实现输入同步

无useReducer版本


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
head>
<body>
<article id="app">article>

<script type="text/jsx">
    let {useContext,useState} = React;

    const AppContext = React.createContext();

    const initialState = {
        inputText: '',
    };

    function Input_one() {
        const {state, setState} = useContext(AppContext);
        return (
            <input value={state.inputText} onChange={e => setState({inputText:e.target.value})}/>
        )
    }

    function Input_two() {
        const {state, setState} = useContext(AppContext);
        return (
            <input value={state.inputText} onChange={e => setState({inputText:e.target.value})}/>
        )
    }

    function App() {
        const [state,setState] = useState(initialState);
        return (
            <React.Fragment>
                <AppContext.Provider value={{state, setState}}>
                    <Input_one/>
                    <Input_two/>
                </AppContext.Provider>
            </React.Fragment>
        );
    }

    ReactDOM.render(
        <App/>,
        document.getElementById("app")
    );
script>
body>
html>

有useReducer版本


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
head>
<body>
<article id="app">article>

<script type="text/jsx">
    let {useContext, useReducer} = React;

    const AppContext = React.createContext();

    const initialState = {
        inputText: '',
    };

    function reducer(state, action) {
        console.log('reducer',arguments);
        switch (action.type) {
            case 'UPDATE_INPUT':
                return {
                    inputText: action.data
                };
            default:
                return initialState;
        }
    }

    function Input_one() {
        const {state, dispatch} = useContext(AppContext);
        const changeInputValue = (newValue) => {
            dispatch({type: 'UPDATE_INPUT', data: newValue,});
        };

        return (
            <input value={state.inputText} onChange={e => changeInputValue(e.target.value)}/>
        )
    }

    function Input_two() {
        const {state, dispatch} = useContext(AppContext);
        const changeInputValue = (newValue) => {
            dispatch({type: 'UPDATE_INPUT', data: newValue,});
        };
        return (<input value={state.inputText} onChange={e => changeInputValue(e.target.value)}/>)
    }

    function App() {
        const [state, dispatch] = useReducer(reducer, initialState);
        return (
            <React.Fragment>
                <AppContext.Provider value={{state, dispatch}}>
                    <Input_one/>
                    <Input_two/>
                </AppContext.Provider>
            </React.Fragment>
        );
    }


    ReactDOM.render(
        <App/>,
        document.getElementById("app")
    );
script>
body>
html>

参考文献:
https://itnext.io/passing-data-between-sibling-components-in-react-using-context-api-and-react-hooks-fce60f12629a

你可能感兴趣的:(react使用useContext实现兄弟组件通信)