如何解决当className更改时,React子级重新渲染
当父级的className更改时,反应子级重新渲染。
library(shiny)
library(shinydashboard)
library(reactable)
library(stringr)
if (interactive()) {
ui <- shinyUI(basicPage(
box(title = "mtcars data",width = 12,reactableOutput("car_tab")
)
))
server <- function(input,output,session) {
output$car_tab <- renderReactable({
df <- mtcars
df$make <- str_extract(rownames(df),"[[:alpha:]]+")
df$model <- rownames(df)
rownames(df) <- NULL
df <- df[,c("make","model","mpg","cyl","disp","hp","drat","wt","qsec","vs","am","gear","carb")]
reactable(df,groupBy = c("cyl","make"),columns = list(
cyl = colDef(name = "Number of cylinders"),am = colDef(name = "Transmission",aggregate = "frequency"),make = colDef(name = "Make",model = colDef(name = "Model",aggregate = "unique"),mpg = colDef(name = "Miles/gallon",aggregate = "mean",format = colFormat(digits = 2)),disp = colDef(name = "Displacement"),hp = colDef(name = "Horsepower"),drat = colDef(name = "Rear axle ratio"),wt = colDef(name = "Weight"),qsec = colDef(name = "1/4 mile time"),vs = colDef(name = "Engine",aggregate = "count"),gear = colDef(name = "Number of forward gears"),carb = colDef(name = "Number of carburetors")
)
)
})
}
shinyApp(ui = ui,server = server)
}
当import React from 'react';
import { useSelector } from 'react-redux';
import items from './ItemsList.js';
import Item from './Item';
import './style.scss';
export default () => {
const isDisabled = useSelector((state) => state.Items.isDisabled);
return (
<div className={`container items-container col ${isDisabled ? 'disabled' : ''}`}>
<div className="row items">
{items.map((obj) => (
// All these items re-renders,when parent container className changed
<Item key={obj.id} obj={obj} />
))}
</div>
</div>
);
};
更改为isDisabled
并且true
样式追加到父disabled
时,子container
元素将重新呈现。
如何在不重新渲染子元素的情况下将样式/类名附加到父对象?
解决方法
<Items>
可以是纯组件。
或
只需在Items内使用shouldComponentUpdate()生命周期钩子即可。
,对于您所说的是对的,实际上只发生了一件事情,那就是 isDisabled
是该父组件的状态属性。
并且由于您正在使用Redux并调用useSelector((state)=>{})
,因此这实际上将AppState绑定到Component状态。因此,从概念上讲,通过使用useSelector()
可以将isDisabled
视为状态属性。按照与React的约定,任何状态更改的组件都必须重新呈现。因此,parent
实际上就是重新渲染。
这是一个重要的报价,它解决了Hooks文档中的所有问题:
选择器大约等效于
mapStateToProps
参数,以在概念上进行连接
以下一些参考资料可帮助您进一步了解本主题:
,解决了将React.memo
添加到子项组件的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。