如何用子组件onClick函数重新渲染父组件?

Question

我有一个父组件调用"RiskMatrix.js"如下所示:

export default function RiskMatrix({disable}) {
const dispatch = useDispatch();
const [risk_matrix, setRiskMatrix] = React.useState(useSelector((state) => state.riskMatrix.risk_matrix));
if (disable == true) {
return (

<TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
{console.log(risk_matrix)}
<Table size="small" sx={{ minWidth: 200 }}>
<TableHead>
<TableRow>
<TableCell align="center" width="90"></TableCell>
{consequences_description.map((description) => (
<TableCell align="center" width="90">{description}</TableCell>
)
)}
</TableRow>
</TableHead>
<TableBody>    

{risk_matrix.map((row, row_index) => (
<TableRow
key={row_index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{likelyhood_description[row_index]}
</TableCell>
{row.map( (column, column_index) => (
<TableCell align="center">
<ToggleButton 
risk={column}
row_index={row_index}
column_index={column_index}
/>
</TableCell>
))}
</TableRow>
))}

</TableBody>
</Table>
</TableContainer>
);
} else {
return null
}
}

我希望当子组件("ToggleButton")的onClick函数被调用时，这个组件重新渲染，子组件看起来如下:

export default function ToggleButton({risk, row_index, column_index}) {
const handleColor = () => {
switch (risk){
case "L":
return "low"
case "M":
return "moderate"
case "H":
return "high"
case "E":
return "extreme"
default:
break;
}
};
const dispatch = useDispatch();
const { updateMatrix} = bindActionCreators(actions, dispatch)
const handleOnClick = () => {
switch (risk){
case "L":
updateMatrix(row_index, column_index, "M")
break;
case "M":
updateMatrix(row_index, column_index, "H")
break;
case "H":
updateMatrix(row_index, column_index, "E")
break;
case "E":
updateMatrix(row_index, column_index, "L")
break;
default:
break;
}
};
return (
<ThemeProvider theme={filtersTheme}>    
<Button variant="contained" color={handleColor()} onClick={()=> handleOnClick()} >{risk}</Button>
</ThemeProvider>
);
}

子组件也使用onClick函数更新react-redux状态，理想情况下，我希望父组件在此状态更改后重新呈现。

Answer 1

React组件在状态更新时重新呈现。因此，一种解决方案是创建一个状态，并将setter传递给子组件，并在需要重新渲染时使用新值调用它。

你也可以在父元素中使用事件冒泡来捕获onClick事件并更新状态，而无需向子元素传递prop。点击这里阅读更多关于事件冒泡的信息

一个更好的实现是使用react的上下文API，这样每个子节点都可以适当地访问矩阵数据，并且在数据自动更改时重新呈现。