从父 React 切换子组件的 div答案

【问题标题】：Toggle div of child component from parent React从父 React 切换子组件的 div
【发布时间】：2021-06-11 17:03:18
【问题描述】：

我试图通过将toggleConfig 属性传递给子组件来在子组件BottomSheet 的两个视图之间切换。但是，按下“切换配置”按钮时似乎没有触发。

Apps.js

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

  const handleConfigView = () => {
    setToggleConfig(!toggleConfig);
  }

  return (
    <div className="App" ref={refContainer}>
    <button onClick={handleToggle}>Toggle Bottom Sheet</button>
    <button onClick={handleConfigView}>Toggle Config</button>
      {toggle && 
      <animated.div style={props} ref={refContainer2}>
      <BottomSheetComponent 
        toggle={handleToggle} 
        toggleConfig={handleConfigView}
        header="My Custom Title" 
        subHeader="Some more information here"
      >
        This is the body of the content section.
      </BottomSheetComponent></animated.div>}
    </div>
  );
}

底页

const BottomSheet = ({toggle, toggleConfig, ...props}) => {
    return (
       <div className={classes.bottomSheetContainer} style={{transform: 'translateY(calc(-40vh + 0px))'}}>
            <div className={classes.headerDragger}></div>
            <svg onClick={toggle} 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>
            {toggleConfig ? (
            <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>
                    <div className={classes.contentContainer}>
                    <p>toggle: {toggle}</p>
                    </div>
                </div>
            )}
        </div>
    )
}

组件当前状态的Codesandbox：https://codesandbox.io/s/green-sky-n098b?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

【问题讨论】：

始终确保检查控制台是否有错误。 “警告：useEffect 收到的最终参数不是数组（而是收到function）。指定后，最终参数必须是数组。”
即使去掉了依赖数组，还是无法触发子组件的视图切换。
这不是重点。他只是指出您错误地使用了useEffect。回到手头的问题——你想在子组件中触发什么？当您点击“切换配置”时应该会发生什么？
@codemonkey - 从BottomShelf 组件中可以看到，toggleConfig 状态值应该在主视图和另一个显示{toggle} 值的视图之间切换。.
你的意思是BottomSheet。因为我没有看到BottomShelf。而在BottomSheet 中，toggleConfig 什么也不做。我看到您正在接受它，但它不涉及任何逻辑。所以坦率地说，我不确定会发生什么。

标签： reactjs react-hooks

【解决方案1】：

因为，您的代码和框中的 useEffect 存在问题。我没有努力调试它。但是通过查看您的代码。您应该在 toggleConfig 中传递状态而不是回调。

 <BottomSheetComponent 
        toggle={handleToggle} 
        toggleConfig={handleConfigView} // it should be toggleConfig
        header="My Custom Title" 
        subHeader="Some more information here"
      >
        This is the body of the content section.
      </BottomSheetComponent></animated.div>}

我建议您需要通过 toggleConfig 因为稍后在您的代码中您正在做

{toggleConfig ? 'show a div' : 'show a button to toggle'}

如果有问题请告诉我。

【讨论】：