如何在不使用Redux的情况下将状态从多个子组件获取到父组件以进行处理

在不使用Redux的情况下，可以通过props和回调函数的方式将状态从多个子组件传递到父组件进行处理。

父组件定义一个状态和处理状态的方法。

import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState('');

  const handleStateChange = (newState) => {
    setState(newState);
  };

  return (
    <div>
      <ChildComponent1 onStateChange={handleStateChange} />
      <ChildComponent2 onStateChange={handleStateChange} />
      <ChildComponent3 onStateChange={handleStateChange} />
      {/* 其他子组件 */}
    </div>
  );
};

export default ParentComponent;

子组件通过props接收回调函数，并在需要更新状态时调用该函数。

import React from 'react';

const ChildComponent1 = ({ onStateChange }) => {
  const handleClick = () => {
    // 子组件中处理状态的逻辑
    const newState = 'New State';
    onStateChange(newState);
  };

  return <button onClick={handleClick}>Update State</button>;
};

export default ChildComponent1;