Study notes-passing values between react components

---

In React, passing values ​​between components is a very important function. The splitting of components in react should be reasonable and fine. Therefore, when the component is split, a page-level component will be divided into a container component and a display component.

Container component: only responsible for all the data and business logic required by the current page component.

Display component: Responsible for receiving the data in the container component and displaying it.

The display components can be divided into more detailed components.

1. The container component passes values ​​to the display component:

In the container component, prepare the data to be transferred (function + data).

render() {
    return (
        // 容器组件
        <UIList list={this.state.list} data={this.state.data}
            changeOrderDir={this.changeOrderDir}
            changeOrderCol={this.changeOrderCol}
        />
    );
}

Receive the call in the display component.

Display components generally use function components: you can receive the passed data in the function.

If it is a class component, you need to use this.props to call.

// 函数组件
const UIList = ({ changeOrderCol }) => (
    <span onClick={ () => changeOrderCol("rate")}>评价</span>
);

// 类组件
class UIList extends React.Component {
    render() {
        return (
            <span onClick={ () => this.props.changeOrderCol("rate")}>评价</span>
        );
    }
}

2. The container component passes values ​​to the child components of the display component:

The container component needs to pass values ​​to the child components of the display component. Of course, it can also be passed layer by layer, but it is more troublesome. If the data is updated, it may cause irrelevant components to be re-rendered.

Here, the context is used to store the data of the container component. The data provider is called the producer, and the data user is called the consumer.

First, we need to create a new context.js file in the folder containing the page-level components, the content of which is:

import React from "react";
export default React.createContext();

Import the context.js file in the container component of the page-level component and use it.

import Context from './context.js';

render() {
                let contextValue = {
                        ...this.state,
                        changeCategory: this.changeCategory,
                        avatar: this.findAvatar(this.state.activeId)
                };
                return (
                        <Context.Provider value={ contextValue }>
                                <UICategory />
                        </Context.Provider>
                );
        }

 In the required sub-components, import the context.js file and use it.

import Context from './context.js';
<Context.Consumer>
    {({listSub, avatar}) => ()}
</Context.Consumer>

When the child component is a functional component:

import React, { useContext } from "react";
import UI from './UI.jsx';
import Context from '../context.js';

const ListOrder = () => {
        // 从Context上下文中拿去数据
        const { orderDir, orderCol, setOrderCol, setOrderDir } = useContext(Context);
        let UIProps = { orderDir, orderCol, setOrderCol, setOrderDir };
        return (
                <UI {...UIProps} />
        );
};

export default ListOrder;

---

By passing parameters between components, the data of container components can be obtained in sub-components, which is conducive to component splitting and code maintenance.