0

我有一个底部抽屉组件BottomSheetComponent，我可以使用状态挂钩从页面顶部的按钮进行切换。单击按钮将抽屉切换到视图后。但是，我无法使用 svg 图标从抽屉本身触发抽屉关闭，并且无法弄清楚如何将状态挂钩从父组件App传递到子组件BottomSheetComponent以触发子组件的关闭。

如何从子组件的 svg 切换子组件关闭？

应用程序.js

function App() {
  const [toggle, setToggle] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  }

  return (
    <div classNameName="App">
    <button onClick={handleToggle}>Toggle Bottom Sheet</button>
      {toggle && <BottomSheetComponent toggle={toggle} header="My Custom Title" subHeader="Some more information here">
      This is the body of the component
      </BottomSheetComponent>}
    </div>
  );
}

export default App;

BottomSheetComponent.js

import { useSpring, animated, interpolate, config } from "react-spring/hooks";
const BottomSheet = (props) => {
    console.log(props)
    const theme = useTheme();
    const classes = useStyles({ theme })

    return (
       <div className={classes.bottomSheetContainer} style={{transform: 'translateY(calc(-40vh + 0px))'}}>
            <div className={classes.headerDragger}></div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                className={classes.closeButton} style={{ position: 'absolute', right: 16, top: 16 }}>
                <path d="M17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071Z" fill="#191919"></path></svg>
            <h1 className={classes.header}>{props.header}</h1>
            <h2 className={classes.subHeader}>{props.subHeader}</h2>
            <div>
                <div className={classes.contentContainer}>
                    <div style={{ background: 'linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229))', height: 800 }}>
                        <h1 style={{ color: '#ffffff', padding: 8, fontSize: 18 }}>
                            {props.children}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    )
}

组件的当前状态：

https://codesandbox.io/s/green-sky-n098b?fontsize=14&hidenavigation=1&theme=dark

4

3 回答 3

0

将handleToggle函数传递给孩子，并将其设置为onClickSVG 文件的处理程序：

const { useState } = React;

const BottomSheetComponent = ({ children, toggle }) => (
  <div>
    <svg
      onClick={toggle}
      height="24" width="24">
        <circle cx="12" cy="12" r="10" stroke="black" strokeWidth="3" fill="red" />
    </svg>
    
    <div>
      {children}
    </div>
  </div>
);

function App() {
  const [toggle, setToggle] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  }

  return (
    <div className="App">
    <button onClick={handleToggle}>Toggle Bottom Sheet</button>
      {toggle && <BottomSheetComponent toggle={handleToggle} header="My Custom Title" subHeader="Some more information here">
      This is the body of the component
      </BottomSheetComponent>}
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

于 2021-03-13T21:26:00.113 回答
0

对于子-父通信，您应该传递一个设置从父到子的状态的函数，并且每当您触发该函数时，状态将被更新。

于 2021-03-13T22:32:20.977 回答
0

同样，您如何将切换作为道具传递，您可以将 setToggle 作为道具传递给孩子。在这种情况下，孩子是您的 BottomSheetComponent。调用你的 handleToggle 应该更新状态。

如果您很难让 svg 触发它。你可以用一个按钮包装它，当事件冒泡时让按钮捕捉事件。您可以停止传播，然后在那里处理逻辑。

于 2021-03-13T21:24:35.513 回答