深入理解 React 组件传参及组件间的相互访问

岁月宁静
62 阅读4分钟

React 组件通信：父组件向子组件传递数据与方法

在 React 开发中，组件间的通信和数据传递是至关重要的。React 提倡单向数据流，即数据从父组件传递到子组件。理解如何在 React 中实现组件传参和相互访问，是构建复杂 React 应用的重要技能。

1. 父组件通过 props 传递数据和方法给子组件

props 是父组件向子组件传递数据的主要方式。父组件可以将状态数据和方法作为 props 传递给子组件，子组件通过 props 对象访问这些数据和方法。

示例：父组件向子组件传递数据和方法

jsx
复制代码
import React, { useState } from 'react';

// 子组件
function ChildComponent({ name, onButtonClick }) {
    return (
        <div>
            <h3>子组件</h3>
            <p>接收到的父组件数据：{name}</p>
            <button onClick={onButtonClick}>点击调用父组件方法</button>
        </div>
    );
}

// 父组件
function ParentComponent() {
    const [name, setName] = useState("React");

    const handleButtonClick = () => {
        setName("React Updated!");
    };

    return (
        <div>
            <h2>父组件</h2>
            <p>当前状态：{name}</p>
            <ChildComponent name={name} onButtonClick={handleButtonClick} />
        </div>
    );
}

export default ParentComponent;

在这个例子中，父组件将状态 name 和方法 handleButtonClick 作为 props 传递给子组件。子组件通过 props 获取父组件的状态，并在按钮点击时调用父组件的方法。

2. 子组件通过回调函数将数据传递给父组件

子组件可以通过调用父组件传递下来的回调函数，将参数传递给父组件。父组件定义一个方法，并将其作为 props 传递给子组件，子组件在需要时调用该方法并传递数据。

示例：子组件向父组件传递表单输入值

jsx
复制代码
import React, { useState } from 'react';

// 子组件
function ChildComponent({ sendDataToParent }) {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    const handleSubmit = () => {
        sendDataToParent(inputValue);
    };

    return (
        <div>
            <h3>子组件</h3>
            <input
                type="text"
                value={inputValue}
                onChange={handleInputChange}
                placeholder="请输入内容"
            />
            <button onClick={handleSubmit}>提交</button>
        </div>
    );
}

// 父组件
function ParentComponent() {
    const [receivedData, setReceivedData] = useState('');

    const handleDataFromChild = (data) => {
        setReceivedData(data);
    };

    return (
        <div>
            <h2>父组件</h2>
            <p>接收到的子组件数据：{receivedData}</p>
            <ChildComponent sendDataToParent={handleDataFromChild} />
        </div>
    );
}

export default ParentComponent;

在这个例子中，子组件调用 sendDataToParent 函数，将输入框的值传递给父组件的 handleDataFromChild 方法，实现数据传递。

3. 使用 Context 实现复杂的数据传递

当多个层级的子组件需要向上传递数据时，可以使用 React 的 Context，避免逐层传递回调函数。

示例：子组件通过 Context 更新父组件的状态

jsx
复制代码
import React, { createContext, useContext, useState } from 'react';

// 创建 Context
const DataContext = createContext();

// 父组件
function ParentComponent() {
    const [data, setData] = useState("初始数据");

    return (
        <DataContext.Provider value={{ data, setData }}>
            <div>
                <h2>父组件</h2>
                <p>当前数据：{data}</p>
                <ChildComponent />
            </div>
        </DataContext.Provider>
    );
}

// 子组件
function ChildComponent() {
    const { setData } = useContext(DataContext);

    const handleChangeData = () => {
        setData("子组件更新了数据");
    };

    return (
        <div>
            <h3>子组件</h3>
            <button onClick={handleChangeData}>更新父组件数据</button>
        </div>
    );
}

export default ParentComponent;

在这个例子中，父组件将 data 和 setData 存储在 DataContext 中，子组件通过 useContext 获取 setData 并更新父组件的状态。

父组件访问子组件的方法

1. 使用 ref 和 forwardRef 访问子组件方法

父组件可以通过 ref 引用子组件，从而访问子组件的实例方法。配合 forwardRef 和 useImperativeHandle，可以更灵活地操作子组件。

示例：父组件调用子组件的方法

jsx
复制代码
import React, { useRef, forwardRef, useImperativeHandle } from 'react';

// 子组件
const ChildComponent = forwardRef((props, ref) => {
    const showAlert = () => {
        alert("子组件方法被调用！");
    };

    useImperativeHandle(ref, () => ({
        showAlert,
    }));

    return (
        <div>
            <h3>子组件</h3>
        </div>
    );
});

// 父组件
function ParentComponent() {
    const childRef = useRef();

    const handleButtonClick = () => {
        childRef.current.showAlert();
    };

    return (
        <div>
            <h2>父组件</h2>
            <button onClick={handleButtonClick}>调用子组件方法</button>
            <ChildComponent ref={childRef} />
        </div>
    );
}

export default ParentComponent;

在这个例子中，父组件通过 childRef 调用子组件的 showAlert 方法，实现父组件对子组件方法的访问。

2. 子组件调用父组件的方法

子组件可以通过 props 调用父组件传递下来的方法，以访问或更新父组件的状态。

示例：子组件调用父组件的方法更新父组件状态

jsx
复制代码
import React, { useState } from 'react';

// 子组件
function ChildComponent({ updateName }) {
    return (
        <div>
            <h3>子组件</h3>
            <button onClick={() => updateName("React Updated by Child!")}>
                修改父组件状态
            </button>
        </div>
    );
}

// 父组件
function ParentComponent() {
    const [name, setName] = useState("React");

    const updateName = (newName) => {
        setName(newName);
    };

    return (
        <div>
            <h2>父组件</h2>
            <p>当前状态：{name}</p>
            <ChildComponent updateName={updateName} />
        </div>
    );
}

export default ParentComponent;

在这个例子中，子组件通过调用 props.updateName 方法，将新的状态数据传递给父组件，从而实现对父组件状态的修改。

3. API 的作用

  • forwardRef: 允许子组件接收父组件的 ref，并将其转发给内部组件，以实现父组件对子组件的直接引用。
  • useImperativeHandle: 让父组件可以自定义暴露给父组件的实例值，从而可以选择性地公开子组件的方法和属性。

总结

  • 组件传参：通过 props 可以将父组件的数据和方法传递给子组件。子组件通过 props 调用父组件的方法，访问和修改父组件的状态。
  • 子组件访问父组件：子组件可以通过回调函数访问父组件的方法和状态，或使用 callback refs 调用父组件的方法。
  • 父组件访问子组件：使用 ref 和 useImperativeHandle，父组件可以调用子组件的方法或访问其内部状态；也可以直接获取子组件的 DOM 元素进行操作。

通过理解和应用这些技术，你可以在 React 中实现更复杂和灵活的组件通信和交互，为构建高效的组件化应用打下坚实的基础。希望本文对你深入掌握 React 组件传参和相互访问有所帮助！

avatar
文章
阅读
粉丝