react-redux 相关问题

我正在使用react-navigation-v6和抽屉导航器。我正在使用 react-navigation-v6 和 Drawer Navigator。 <Drawer.Screen name="Screen1" component={MainScreen} options={{ headerShown: true, title: "Main Screen', }} /> Drawer.Screen name="Screen2" component={SecondaryScreen} options={{ headerShown: true, title: "Secondary screen", }} /> 我想要实现的是，每次当前屏幕/路线更改时，我想使用我当前所在屏幕的 title 调度 Redux 函数。比如： dispatch(setReduxContent(CurrentScreen.title)); 我怎样才能实现这一目标？意味着获取当前焦点屏幕的标题，以便将其传递给函数。我可以在每个屏幕组件中的useFocusEffect()中分派该函数，但我觉得这不是一个好的解决方案。导航道具上没有 getOptions 或 getScreenOptions 方法。您必须手动执行此操作，或者在执行 navigation.navigate('nextScreen', {title: 'nextScreenTitle'}) 时传递下一个屏幕标题，并从内部 NextScreen 您将能够从 route params 访问 title，或者您可以调用 redux 更新存储函数具有来自每个不同屏幕的硬编码标题（这看起来不是一个好的解决方案）

react-native react-redux react-navigation

回答 1 投票 0

React 检查来自包装组件的访问

我想在单击按钮之前（或在按钮 onClick 函数触发之前）检查包装组件的用户访问权限。这是按钮组件我想在单击按钮之前（或在按钮 onClick 函数触发之前）检查包装器组件的用户访问权限。这是按钮组件 <UltimateButton btntext="+ New document" classes="btn-primary" handleClick={create_new_doc} /> 这里 handleClick 触发 onClick 函数 (create_new_doc)。假设我有一个包装器组件 <AccessControl> 来包装这个按钮组件。我想在 AccessControl 被触发之前单击 create_new_doc 时检查访问权限。我是这样写的 import React, { Children, cloneElement } from "react"; const AccessControl = ({children}) => { const checkUserAccess = () => { console.log('Access denied') } return {...children} } export default AccessControl; 现在，如果 AccessControl 中的访问被拒绝，那么 create_new_doc 将不再触发。我怎样才能实现它。我也尝试过克隆元素。这个会这样使用 <AccessControl> <UltimateButton btntext="+ New document" classes="btn-primary" handleClick={create_new_doc} /> </AccessControl> 您可以通过多种方式做到这一点。如果您想保持类似的流程（使用访问包装器），那么您应该让包装器本身处理单击以有条件地呈现按钮。这是一种简单的方法来做到这一点（如上所述，有很多方法可以做到这一点，如果您想要不同的版本，请告诉我）： import React from "react"; const AccessControl = ({ hasAccess, handleClick, children }) => { const handleButtonClick = () => { if (hasAccess) { handleClick(); } else { console.log('Access denied'); } }; return ( <div> {hasAccess ? ( children ) : ( <button disabled onClick={handleButtonClick}> Access Denied </button> )} </div> ); }; export default AccessControl; 用法： <AccessControl hasAccess={checkUserAccess()}> <UltimateButton btntext="+ New document" classes="btn-primary" handleClick={create_new_doc} /> </AccessControl> 看来您克隆子组件的想法是正确的。克隆子组件并重新注入一个“装饰”的 handleClick 属性，该属性首先调用 checkUserAccess，如果此函数返回 true 或确认用户具有访问权限，则它将调用最初传递的 handleClick 回调。示例： const AccessControl = ({ children }) => { const checkUserAccess = () => { // Compute hasAccess console.log(hasAccess ? "Access allowed" : "Access denied"); return hasAccess; }; return Children.map(children, (child) => cloneElement(child, { handleClick: (e) => checkUserAccess() && child.props.handleClick(e) }) ); }; 演示 const AccessControl = ({ children, hasAccess }) => { const checkUserAccess = () => { console.log(hasAccess ? "Access allowed" : "Access denied"); return hasAccess; }; return React.Children.map(children, (child) => React.cloneElement(child, { handleClick: (e) => checkUserAccess() && child.props.handleClick(e) }) ); }; const UltimateButton = ({ btntext, handleClick }) => ( <button type="button" onClick={handleClick}> {btntext} </button> ); const App = () => { const create_new_doc = () => console.log("create_new_doc"); return ( <div className="App"> <UltimateButton btntext="No Access Control + New document" classes="btn-primary" handleClick={create_new_doc} /> <AccessControl hasAccess> <UltimateButton btntext="Has access + New document" classes="btn-primary" handleClick={create_new_doc} /> </AccessControl> <AccessControl> <UltimateButton btntext="No access + New document" classes="btn-primary" handleClick={create_new_doc} /> </AccessControl> </div> ); }; const rootElement = document.getElementById("root"); const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <App /> </React.StrictMode> ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <div id="root" />

javascript reactjs react-redux

回答 2 投票 0

react-redux 相关问题

最新问题