触发器组件从不同组件呈现，而不呈现整个页面。
触发器组件从不同组件呈现，而不呈现整个页面。
提问于 2022-09-02 18:32:34
在我的项目中，我有一个Page组件，用于添加项，然后在Navigation面板中显示它们：
import React, { useState } from 'react'
const Page = ({setRefreshList}) => {
console.log("PAGE RENDER");
const addItem = () => {
// adding item to database
setRefreshList();
}
return (
<button onClick={addItem}>Add Item</button>
)
}Navigation组件，带有站点菜单和项：
const Navigation = () => {
console.log("Navigation RENDER");
return (
<div>
List of all items:
</div>
)
}页面中更多的组件，如Header
const Header = () => {
console.log("HEADER RENDER");
return (
<div>
HEADER
</div>
)
}和主要的App
export function App(props) {
const [refreshList, setRefreshList] = useState(0);
return (
<div className='App'>
<Header />
<Navigation />
<Page setRefreshList={setRefreshList} />
</div>
);
}每次添加到Navigation中时，我都需要刷新Page组件，所以我使用了setState。现在，每当状态发生变化时，它也会呈现所有其他组件。
我试着使用React.memo()，但是它在这里没有效果，因为props包含一个函数。合并Page和Navigation并不是一种选择，因为在整个项目中，它们是分开的。
链接到联机代码编辑器的示例：https://playcode.io/953730/。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-02 20:24:37
“我试着使用React.memo，但是它在这里没有作用，因为道具包含函数”，好吧，这种用例有一个钩子，叫做useCallback，您可以这样使用：
const Page = React.memo(({ setRefreshList }) => {
console.log("PAGE RENDER");
const addItem = React.useCallback(() => {
// adding item to database
setRefreshList(Math.random());
}, []);
return <button onClick={addItem}>Add Item</button>;
});
const Navigation = () => {
console.log("Navigation RENDER");
return <div>List of all items:</div>;
};
const Header = React.memo(() => {
console.log("HEADER RENDER");
return <div>HEADER</div>;
});
function App(props) {
const [refreshList, setRefreshList] = React.useState(0);
return (
<div className="App">
<Header />
<Navigation />
<Page setRefreshList={setRefreshList} />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Stack Overflow用户
发布于 2022-09-03 08:06:46
在您的简化示例中，您只需更新key属性并强制响应重呈现Navigation组件。
function App(props) {
const [refreshList, setRefreshList] = React.useState(0);
return (
<div className="App">
<Header />
<Navigation key={refreshList} />
<Page setRefreshList={setRefreshList} />
</div>
);
}您还可以使用全局响应上下文，并让Page和Navigation通过上下文共享refreshList。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73586727
复制相关文章
相似问题
腾讯云开发者
