likes
comments
collection
share

React：在React中，父子组件怎么通信？没有关联的组件呢？

作者站长头像
站长
· 阅读数 59

在React中，父子组件之间的通信是非常常见的需求。常见的通信方式包括父组件向子组件传递数据（props）、子组件向父组件传递数据（回调函数），以及没有直接关系的组件之间的通信（Context API、全局状态管理库等）。以下是具体的实现方式和示例：

父组件向子组件传递数据（Props）

父组件通过props将数据传递给子组件。子组件通过接收props来使用这些数据。

示例

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from Parent';

  return <ChildComponent message={data} />;
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ message }) => {
  return <div>{message}</div>;
};

export default ChildComponent;

在这个示例中，ParentComponent通过props将message传递给ChildComponent。

子组件向父组件传递数据（回调函数）

父组件可以将一个回调函数作为prop传递给子组件，子组件在需要时调用这个回调函数，将数据传递回父组件。

示例

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent onMessageChange={handleMessageChange} />
      <p>Message from Child: {message}</p>
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ onMessageChange }) => {
  const handleChange = (event) => {
    onMessageChange(event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

export default ChildComponent;

在这个示例中，ParentComponent传递一个onMessageChange回调函数给ChildComponent，子组件在输入变化时调用该回调函数，将新数据传递给父组件。

没有关联的组件之间的通信

1. 使用 Context API

Context API 允许你在组件树中传递数据，而不必通过每个层级的显式props传递。这对于没有直接关系的组件之间的通信非常有用。

示例
// MessageContext.js
import React, { createContext, useContext, useState } from 'react';

const MessageContext = createContext();

export const MessageProvider = ({ children }) => {
  const [message, setMessage] = useState('Hello from Context');

  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      {children}
    </MessageContext.Provider>
  );
};

export const useMessage = () => {
  return useContext(MessageContext);
};

// ParentComponent.js
import React from 'react';
import { MessageProvider } from './MessageContext';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

const ParentComponent = () => {
  return (
    <MessageProvider>
      <ChildComponentA />
      <ChildComponentB />
    </MessageProvider>
  );
};

export default ParentComponent;

// ChildComponentA.js
import React from 'react';
import { useMessage } from './MessageContext';

const ChildComponentA = () => {
  const { message } = useMessage();

  return <div>{message}</div>;
};

export default ChildComponentA;

// ChildComponentB.js
import React from 'react';
import { useMessage } from './MessageContext';

const ChildComponentB = () => {
  const { setMessage } = useMessage();

  return <button onClick={() => setMessage('Message from Child B')}>Change Message</button>;
};

export default ChildComponentB;

2. 使用状态管理库（如 Redux 或 Recoil）

对于复杂的应用，可以使用状态管理库来管理全局状态，实现组件之间的数据共享。

使用 Redux
  1. 安装 Redux 相关库
yarn add redux react-redux @reduxjs/toolkit
# or
npm install redux react-redux @reduxjs/toolkit
  1. 创建 Redux store
// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const messageSlice = createSlice({
  name: 'message',
  initialState: 'Hello from Redux',
  reducers: {
    setMessage: (state, action) => action.payload,
  },
});

export const { setMessage } = messageSlice.actions;

const store = configureStore({
  reducer: {
    message: messageSlice.reducer,
  },
});

export default store;
  1. 在应用中使用 Redux Provider
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <Provider store={store}>
      <ParentComponent />
    </Provider>
  );
};

export default App;
  1. 在组件中使用 Redux
// ChildComponentA.js
import React from 'react';
import { useSelector } from 'react-redux';

const ChildComponentA = () => {
  const message = useSelector((state) => state.message);

  return <div>{message}</div>;
};

export default ChildComponentA;

// ChildComponentB.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { setMessage } from './store';

const ChildComponentB = () => {
  const dispatch = useDispatch();

  return <button onClick={() => dispatch(setMessage('Message from Child B'))}>Change Message</button>;
};

export default ChildComponentB;

3. 自定义 Hook

自定义 Hook 可以将逻辑抽象出来，在多个组件中共享状态和行为。

示例
// useSharedMessage.js
import { useState, createContext, useContext, ReactNode } from 'react';

const SharedMessageContext = createContext(null);

export const SharedMessageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [message, setMessage] = useState('Hello from Custom Hook');

  return (
    <SharedMessageContext.Provider value={{ message, setMessage }}>
      {children}
    </SharedMessageContext.Provider>
  );
};

export const useSharedMessage = () => {
  const context = useContext(SharedMessageContext);
  if (!context) {
    throw new Error('useSharedMessage must be used within a SharedMessageProvider');
  }
  return context;
};

// ParentComponent.js
import React from 'react';
import { SharedMessageProvider } from './useSharedMessage';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

const ParentComponent = () => {
  return (
    <SharedMessageProvider>
      <ChildComponentA />
      <ChildComponentB />
    </SharedMessageProvider>
  );
};

export default ParentComponent;

// ChildComponentA.js
import React from 'react';
import { useSharedMessage } from './useSharedMessage';

const ChildComponentA = () => {
  const { message } = useSharedMessage();

  return <div>{message}</div>;
};

export default ChildComponentA;

// ChildComponentB.js
import React from 'react';
import { useSharedMessage } from './useSharedMessage';

const ChildComponentB = () => {
  const { setMessage } = useSharedMessage();

  return <button onClick={() => setMessage('Message from Child B')}>Change Message</button>;
};

export default ChildComponentB;

总结

在React中，父子组件之间的通信通常通过props和回调函数实现，而没有直接关系的组件之间的通信可以使用Context API、自定义Hooks或状态管理库（如Redux或Recoil）。根据应用的复杂性和需求选择合适的通信方式，可以提高代码的可读性和可维护性，并使状态管理更加高效。

追问：父组件怎么拿子组件的变量或者调用子组件的方法？

在React中，父组件可以通过以下几种方式获取子组件的变量或调用子组件的方法：

1. 使用回调函数传递数据

父组件可以将一个回调函数作为prop传递给子组件，子组件调用这个回调函数并传递数据给父组件。

示例

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ sendDataToParent }) => {
  const handleClick = () => {
    const data = 'Hello from Child';
    sendDataToParent(data);
  };

  return <button onClick={handleClick}>Send Data to Parent</button>;
};

export default ChildComponent;

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [childData, setChildData] = useState('');

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

  return (
    <div>
      <ChildComponent sendDataToParent={handleDataFromChild} />
      <p>Data from Child: {childData}</p>
    </div>
  );
};

export default ParentComponent;

在这个示例中，ParentComponent传递一个sendDataToParent回调函数给ChildComponent，子组件在按钮点击时调用该回调函数并传递数据给父组件。

2. 使用Ref获取子组件实例

在类组件中，父组件可以通过React.createRef或React.useRef获取子组件的实例，并调用其方法或访问其属性。

示例（类组件）

// ChildComponent.js
import React, { Component } from 'react';

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: 'Hello from Child' };
  }

  getData = () => {
    return this.state.data;
  };

  render() {
    return <div>Child Component</div>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    const data = this.childRef.current.getData();
    console.log('Data from Child:', data);
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Get Data from Child</button>
      </div>
    );
  }
}

export default ParentComponent;

在这个示例中，ParentComponent通过this.childRef获取ChildComponent的实例，并调用其getData方法获取数据。

3. 使用Ref获取子组件实例（函数组件）

在函数组件中，可以使用React.forwardRef和useImperativeHandle来实现类似的功能。

示例（函数组件）

// ChildComponent.js
import React, { useImperativeHandle, forwardRef, useState } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const [data, setData] = useState('Hello from Child');

  useImperativeHandle(ref, () => ({
    getData: () => data,
  }));

  return <div>Child Component</div>;
});

export default ChildComponent;

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const childRef = useRef();

  const handleClick = () => {
    const data = childRef.current.getData();
    console.log('Data from Child:', data);
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Get Data from Child</button>
    </div>
  );
};

export default ParentComponent;

在这个示例中，ChildComponent使用forwardRef和useImperativeHandle将getData方法暴露给父组件，父组件通过childRef调用getData方法获取数据。

4. 使用Context

如果有多个子组件需要与父组件通信，可以使用Context来共享数据和方法。

示例

// MyContext.js
import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [data, setData] = useState('Hello from Context');

  return (
    <MyContext.Provider value={{ data, setData }}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = () => {
  return useContext(MyContext);
};

// ChildComponent.js
import React from 'react';
import { useMyContext } from './MyContext';

const ChildComponent = () => {
  const { data, setData } = useMyContext();

  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={() => setData('Updated by Child')}>Update Data</button>
    </div>
  );
};

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import { MyProvider, useMyContext } from './MyContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const { data } = useMyContext();

  return (
    <div>
      <p>Data from Context: {data}</p>
      <ChildComponent />
    </div>
  );
};

const App = () => {
  return (
    <MyProvider>
      <ParentComponent />
    </MyProvider>
  );
};

export default App;

在这个示例中，MyProvider使用Context共享数据和方法，ChildComponent和ParentComponent通过Context访问和修改数据。

总结

  • 回调函数：通过回调函数将子组件的数据传递给父组件。
  • Ref：在类组件中使用React.createRef，在函数组件中使用React.forwardRef和useImperativeHandle获取子组件实例并调用其方法。
  • Context：使用Context在多个组件之间共享数据和方法。

根据具体的需求选择合适的通信方式，可以实现父子组件之间的高效通信。

转载自:https://juejin.cn/post/7381348874450370569
评论
请登录