时间戳

首页 > 解决方案 > 如何从另一个组件设置状态

javascript - 如何从另一个组件设置状态

问题描述

我Button在我的标题中有，它具有 onClick 功能来打开Drawer. 现在组件Header是_index.jsx

这是结构：

// index.jsx -> page holds all the functions above, Header is component

         <Header
                countCartItems={cartItems.length}
                cartItems={cartItems}
                onAdd={onAdd}
                onRemove={onRemove}
                setCartOpen={setCartOpen}
            />

页眉.jsx

const Header = (props) => { 
........
<button onClick={() => props.setCartOpen(true)}>
        <Badge badgeContent={props.countCartItems} />
                          
</button>
........
}

上面的代码工作得很好，但只有当我在 index.page

我Header还需要在其他页面上导入组件，但在这种情况下，当我想单击我的按钮并打开购物车时，我收到以下错误：

TypeError：props.setCartOpen 不是函数

我尝试再次传递道具，但它不起作用，因为所有功能都保存在index.jsx.

如果我投入Header，App.js问题是一样的。有什么解决办法吗？还是我必须把所有东西都搬进去App.js？必须有一种方法如何在它们之间共享道具。

在另一个页面中传递 Header：

const NewPage = ({setCartOpen}) => { 
.......
   <Header setCartOpen={setCartOpen} />
.......
}

问题是，新页面不是索引页面的子页面，所以我不知道如何正确传递它。

路由器.js

 <Route path={baseRouteUrl + '/new-page'}
        component={(props) => <NewPage />}
 ></Route>

标签： javascriptreactjsreact-hooksreact-props

解决方案

你可以使用 React.Context 并且这个上下文对象在整个组件树中都是可用的

import { createContext, useContext, useState } from "react";
const ValueContext = createContext(); // React Context saves you from prop drilling

function Child() {
 return (
   <div>
     <ValueContext>
       {(value) => {
                   // you can also pass setValue() and is passed along the component tree
         return <p>{value.value}</p>;
       }}
     </ValueContext>
   </div>
 );
}

function App() {
 const [value, setValue] = useState("hello world");

 return (
   <ValueContext.Provider value={{ value, setValue }}>
     <div>
       <Child />
     </div>
   </ValueContext.Provider>
 );
}

export default App;

推荐阅读