当我在另一个功能组件中定义一个 React 功能组件时，为什么（某些）CSS styles 会中断？

Question

为什么在另一个功能组件中定义一个 React 功能组件会中断 CSS 转换？

function Doohick({isOpen}: {isOpen: boolean}) {
    const style = {
        transition: 'opacity 2s ease',
        ...(isOpen ? {opacity: 1} : {opacity: 0})
    }

    return (
        <div style={style}>
            Doohick!!!
        </div>
    )
}

function Parent() {
   const [open, isOpen] = useState(false)
   return (
     <>
        <button onClick={() => setIsOpen(!isOpen)}>Toggle Doohick</button>
        <Doohick isOpen={isOpen} />
     </>
   )
}

如果我在Parent之外定义Doohick ，如上所述，一切都很好。 如果我将定义移动到Parent中，没有其他更改，我的 CSS 转换就会中断。 其他CSS属性没问题。

为什么在另一个功能组件中定义一个功能组件会中断 CSS 转换？

我为什么要这样做的复杂解释

我听到你在问：我为什么要这样做？ 我会告诉你，但请记住，你不需要知道任何这些来理解具体问题。

我想将Doohick state 封装在自定义钩子中：

function useDoohick() {
  const [isOpen, setIsOpen] = useState(false)
  
  const ToggleButton = 
    <Button onClick={() => setIsOpen(!isOpen)}>Toggle Doohick</Button>
  
  const Doohick = <MyDoohick show={isOpen}/>

  return {ToggleButton, Doohick} 
}

function Parent() {
  const {Doohick, ToggleButton} = useDoohick()

  return (
    <>
      {ToggleButton}
      {Doohick}
    </>
  )
}

但我也希望Parent能够将自己的道具传递给Doohick或ToggleButton 。 我几乎可以这样实现：

function useDoohick() {
  const [isOpen, setIsOpen] = useState(false)
  
  const ToggleButton = ({text}) =>
    <Button 
      onClick={() => setIsOpen(!isOpen)}
    >
     {text}
    </Button>
  
  const Doohick = () => 
    <MyDoohick show={isOpen} />

  return {ToggleButton, Doohick} 
}

function Parent() {
  return (
    <>
      <ToggleButton text='Burninate' />
      <Doohick />
    </>
  )
}

这与广告宣传的一样： ToggleButton呈现预期的 label 并控制是否显示Doohick 。 但是这种模式打破了我在Doohick上定义的一些 CSS styles（特别是转换）。 其他styles都可以。

我仍然可以这样称呼它：

function Parent() {
  return (
    <>
      {ToggleButton({text: 'Burninate'})}
      {Doohick()}
    </>
  )
}

...并且转换工作正常。 但我更喜欢这里的标准 JSX 语法：

<ToggleButton text='Burninate />

显然， <Doohick />和Doohick()是不同的。 但是，前者在这里打破 CSS 转换的原因是什么？

问题的根源归结为在Parent中定义自定义组件。 钩子本身是无关紧要的。 但是这种将 state 封装在自定义钩子中同时返回可自定义组件的模式非常强大并且几乎可以工作，所以我希望有一种方法可以保存它。

长话短说

为什么在另一个组件中定义一个组件会破坏我的 CSS 转换（可能还有我尚未找到的其他 styles）？ 如何在仍然使用 JSX 样式语法调用我的嵌套组件的同时解决这个问题？

Answer 1

在另一个组件中定义一个组件总是会导致这样的问题。 每次渲染外部组件时，都会为内部组件创建一个全新的定义。 它可能与之前渲染的文本具有相同的文本，但它是 memory 中的一个不同的 function，因此就 React 而言，它是一种不同类型的组件。

组件类型是 React 在协调更改时寻找的主要内容。 由于类型改变，React 被迫卸载旧组件，然后安装新组件。 因此，不是在页面上有一个样式正在改变的<div> ，而是有一个具有某种样式的 div，然后它被删除，一个不相关的 div 被放到页面上。 它可能有不同的风格，但由于这是一个全新的 div，transition 属性不会做任何事情。