当前组件外部的访问功能[重复]答案

【问题标题】：Access function outside of current component [duplicate]当前组件外部的访问功能[重复]
【发布时间】：2022-12-08 21:42:59
【问题描述】：

我正在尝试使用 navbar.js 中的按钮访问 main.js 中的函数，这样我就可以打开 main.js 组件中的抽屉。有没有办法做到这一点？或者我必须为此使用 Redux 吗？应用程序.js

<Navbar />
<main />

导航栏.js

<Button type="default" onClick={showDrawer}>Send</Button>

主程序

const showDrawer = () => {
  setOpen(true);
};

【问题讨论】：

把它作为道具传递下去。

标签： javascript reactjs

【解决方案1】：

要从navbar.js访问main.js中的showDrawer函数，您可以将该函数作为prop传递给navbar.js，然后在按钮的onClick事件中调用它。

代码：

// main.js
const [open, setOpen] = useState(false)

const showDrawer = () => {
  setOpen(true)
}

return (
  <div>
    <Navbar showDrawer={showDrawer} />
  </div>
)

// navbar.js
const Navbar = (props) => {
  const { showDrawer } = props

  return (
    <Button type='default' onClick={showDrawer}>
      Send
    </Button>
  )
}

编辑：

根据您的评论，您可以使用 React.memo 包装 Navbar 组件：

// main.js
import Navbar from './Navbar';

const [open, setOpen] = useState(false);

const showDrawer = () => {
  setOpen(true);
};

return (
  <div>
    <Navbar showDrawer={showDrawer} />
  </div>
);

// App.js
import Navbar from './Navbar';

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  );
};

export default React.memo(App);

【讨论】：

但这不会第二次显示导航栏，因为它已经被导入到 App.js 中了吗？ <导航栏 showDrawer={showDrawer} />
从提供的信息中不清楚Navbar 被导入的位置或它在App.js 中的使用方式。一般来说，如果Navbar被导入并在App.js中渲染，那么它会显示在渲染输出中
如果只想显示一次Navbar，可以使用React.memo高阶组件将Navbar组件包裹在App.js中。如果组件的道具没有改变，这将防止组件重新渲染