想要重新渲染React JS中的其他组件

Question

实际上我希望另一个组件重新渲染，如果在其他组件中做了一些更改，两个组件的父组件包含一些我不希望它们重新渲染的其他组件。只是希望当函数执行时，它返回到父组件，只重新呈现特定的组件。不能使用windows .location.reload，因为它会刷新所有的项——任何只能呈现被触发组件的项。下面的代码只是为了说明这个想法。当在

中进行更改时，必须在其他组件中反映

{/* Parent Component*/}
class Parent extends React.Component {
constructor() {
super();
this.state = {
}
}
render() {
return (
<>
<SecondComponent />

<firstComponent />
<anotherComponent />
<anotherComponent />
<anotherComponent />

</>
);
}
}
export default Parent;
{/* 1 child component */}
import { React } from "react";
const FirstComponent = () => {
const handleChange=(event) =>{
const {name, value}=event.target
localStorage.setItem(name, value)
}
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-11 col-md-10 mx-auto">
<h1>All Searches</h1>
<input type='text' name='tab1' onChange={handleChange} />
<input type='text' name='tab2' onChange={handleChange} />
</div>
</div>
</div>
</>
);
}
export default FirstComponent;
{/* 2nd Child Component */}
import React from 'react';
import { NavLink } from 'react-router-dom'
class SecondComponent extends React.Component {
constructor(){
super();
this.state={
tab1:localStorage.getItem("tab1"),
tab2:localStorage.getItem("tab2"),
}
}
render() {
return (
<>
<div className="d-inline-flex" style={{ background: "#242F84", width: "100%" }}>
<NavLink to="/" className="Home">
<p className="mb-0 FS_28 px-2 White" >Home</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">All Searches</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">{this.state.tab1}</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">{this.state.tab2}</p>
</NavLink>
</div>
</>
);
}
}
export default SecondComponent;

Answer 1

重新呈现组件的标准方法是改变其状态。问题是——如果组件的状态没有改变，为什么要重新渲染它?

我看到你正在使用本地存储-我建议你尽可能多地使用本地状态而不是本地存储来管理这种类型的信息。