css - 为什么可重复使用的道具不起作用并显示未定义

Question

我不得不使用布尔挂钩表达式，即 isMainPage。逻辑是 if isMainPageis truethen classNameis mainPageActiveif not then it should be mainPage，但主要问题是我放在主要组件中的道具显示我未定义。如果我做错了，请告诉我。

const WebHeader = () => {
     
  const [threeDots, setThreeDots] = useState(false);
    
  console.log(threeDots);
    
  return (
        <>
          <Sidebar isSideBarShown={threeDots} />
          <div className="threeLine">
            <button
              class="menu"
              aria-label="Main Menu"
              onClick={() => setThreeDots(!threeDots)}
            >
              <svg width="30" height="30" viewBox="0 0 100 100">
                <path
                  className={threeDots ? "openedline1 line" : "line line1"}
                  d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
                />
                <path
                  className={threeDots ? "openedline2 line" : "line line2"}
                  d="M 20,50 H 80"
                />
                <path
                  className={threeDots ? "openedline3 line " : "line line3"}
                  d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
                />
              </svg>
            </button>
          </div>
         
      <Main isMainShown={threeDots} />
    </>
  );
};
    
export default WebHeader;

这是主要组件

const Main = (props, { isMainShown }) => {
  console.log(isMainShown);
  useEffect(() => {
    props.ImportForamttedFile();
  }, []);
  return (
    <>
      <div className={isMainShown ? "mainPageActive" : "mainPage"}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/GrossProfitView">
            <GrossProfitView Sheet={props.Sheet} />
          </Route>
          <Route exact path="/data/augest-21/reports">
            <Report Sheet={props.Sheet} />
          </Route>
          <Route exact path="/Scorecard">
            <ScoreCard Sheet={props.Sheet} />
          </Route>
          <Route exact path="/Commisionview">
            <CommisionView />
          </Route>
          <Route exact path="/Activationview">
            <ActivationView />
          </Route>
          <Route exact path="/Accessoriesview">
            <Accessoriesview />
          </Route>
          <Route exact path="/TotalMobileProtection(TMP)View">
            <TotalMobileProtectionView />
          </Route>
          <Route exact path="/Notification/AllNotifications">
            <AllNotification />
          </Route>
        </Switch>
      </div>
    </>
  );
};
    
const mapStatetoProps = (state) => {
  return {
    Sheet: Object.values(state.Sheet),
  };
};
    
export default connect(mapStatetoProps, { ImportForamttedFile })(Main);

Answer 1

您可以通过这种方式访问​​道具。

const Main = (props) => {
 const { isMainShown } = props;
}