如何使用单击事件在 React - typescript - Styled-components 应用程序中修改 DOM？

Question

我有一个由 React、Typescript 和样式化组件构建的应用程序（Typescript 和样式化组件的初学者）。我想创建一个简单的点击事件，在父组件内部可见的两个子组件之间切换。你能帮我修复我的代码或建议替代方法吗？

这是我想到的代码，其中我无法解决的部分 //comment:

let flipSwitch: boolean = false;

export const myCard: React.FC<myProps> = (props) => {
  return (
    <Parent onClick={e => {
       if (!flipSwitch) {
         // dontn't know how to write this part:
         //e.get Child1 element.style.display = 'none';
         //e.get Child2 element.style.display = 'none';
         flipSwitch = true;
        } else {
         //e.get Child2 element.style.display = 'none';
         //e.get Child1 element.style.display = 'block';
         flipSwitch = false;
       }
     }
      
    }>
      
      <Child1>
          <GrandChild>{props.whatever}</GrandChild>
          <GrandChild2>{props.whatever}</GrandChild2>
      </Child1>

      <Child2>
          <GrandChild3>{props.whatever}</GrandChild3>
          <GrandChild4>{props.whatever}</GrandChild4>
      </Child2>

    </Parent>
  )
}

Answer 1

您可以在组件本身上使用状态和条件状态：

import React, { useState } from 'react';

export const myCard: React.FC<myProps> = (props) => {
  const [flipSwitch, setFlipSwitch] = useState(false)

  return (
    <Parent onClick={e => setFlipSwitch(!flipSwitch)}>
      
     {flipSwitch &&
       <Child1>
          <GrandChild>{props.whatever}</GrandChild>
          <GrandChild2>{props.whatever}</GrandChild2>
       </Child1>
     }

    {!flipSwitch &&
      <Child2>
          <GrandChild3>{props.whatever}</GrandChild3>
          <GrandChild4>{props.whatever}</GrandChild4>
      </Child2>
    }

    </Parent>
  )
}

我真的不知道应该在你的代码中显示哪一个，但随便玩玩吧^^

如何使用单击事件在 React - typescript - Styled-components 应用程序中修改 DOM？

How to modify DOM in React - typescript - Styled-components app with click event?

onclick

dom-events

typescript

reactjs

styled-components