时间戳

首页 > 解决方案 > 你如何一起传递多个包装好的道具

javascript - 你如何一起传递多个包装好的道具

问题描述

当我尝试以下操作时，我收到此错误：

Unhandled Runtime Error
TypeError: navbar.makeButtonClick is not a function

Source
.next/static/chunks/pages/index.js (19:29) @ onClick

  17 | return(
  18 |   <button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
> 19 |     onClick={()=>{navbar.makeButtonClick(!navbar.buttonClick);
     |                           ^
  20 |                   userprops.makeRefresh(!userprops.refresh);
  21 |                   }}>
  22 |     {navprops.navbutton}

但我真的不明白..makeButtonClick是一个选项，我使用相同的方法通过mainprops并且userprops它有效...

整个组件：

import styleNavbar from '../../../styles/Main/Navbar.module.css'
import React, {useState, useEffect, useRef} from 'react';


const NavButtonCreator = (props) => {
  const {mainprops,userprops,navbar,navprops,...styleprops} = props;

  return(
    <button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
      onClick={()=>{navbar.makeButtonClick(!navbar.buttonClick);
                    userprops.makeRefresh(!userprops.refresh);
                    }}>
      {navprops.navbutton}
    </button>
  );
};

const NavButtonStyler = (props) => {
  const {mainprops,userprops,navbar,...navprops} = props;

  return(
    <>
    {props.place=='left'&&
      <div className=''>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    {props.place=='center'&&
      <div className='absolute left-1/2 transform -translate-x-1/2 '>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    {props.place=='right'&&
      <div className='absolute right-0'>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    </>  
  )
};

const Navbar = (props) => {
  const {mainprops, ...userprops} = props;
  const [buttonClick, makeButtonClick] = useState(false);

  const navbar = {
    buttonClick,
    makeButtonClick
};


  useEffect(()=>{ 
    return(
      ()=>{ userprops.setPageId(navbutton);
          }
    );
  },[buttonClick]);


  if (userprops.visitorType == 'viewer') {
    return(
      <div>
        <nav className = {`${styleNavbar.page__menu} ${styleNavbar.page__custom_settings} ${styleNavbar.menu}`} >
          <ul className = {`${styleNavbar.menu__list} ${styleNavbar.r_list}`} >
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the world'         />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the country'          />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the state'         />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='center' navbutton='the city'   />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='right'  navbutton='the town'  />
          </ul>
        </nav>
      </div>
    )}
  };

export default Navbar;

标签： javascriptreactjsnext.js

解决方案

在每个NavButtonStyler组件中（在 内部Navbar），您都在拆包navbar道具：

<NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the world'         />
                                                             ^ Here

这意味着buttonClickandmakeButtonClick函数作为 props 传递。直接传navbar道具就好了。

<NavButtonStyler mainprops={mainprops} userprops={userprops} navbar={navbar} place='left'   navbutton='the world'         />

推荐阅读