react函数组件中通过子组件中的一个状态控制父组件中样式的切换

在React函数组件中，可以通过将子组件中的状态通过props传递给父组件，来控制父组件中的样式切换。具体实现步骤如下：

1. 在父组件中定义一个状态，用来控制样式的切换，例如isClicked:

import React, { useState } from 'react';

function ParentComponent() {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <div className={isClicked ? 'clicked' : 'not-clicked'}>
      <ChildComponent setIsClicked={setIsClicked} />
    </div>
  );
}

2. 在子组件中定义一个函数来处理点击事件，并将处理后的状态通过props传递给父组件：

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.setIsClicked(true);
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

3. 在父组件中根据isClicked状态来控制样式的切换：

import React, { useState } from 'react';

function ParentComponent() {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <div className={isClicked ? 'clicked' : 'not-clicked'}>
      <ChildComponent setIsClicked={setIsClicked} />
    </div>
  );
}

这样，当子组件被点击时，父组件的isClicked状态会改变，从而控制样式的切换。