Javascript 要在React JS中重新呈现其他组件吗

实际上，我希望另一个组件重新渲染如果在其他组件中进行了一些更改，则两个组件的父级都包含我不希望它们重新渲染的其他组件。只是想在执行函数时返回到父级，只重新呈现特定组件。无法使用Window.location.reload，因为它会刷新所有项目，并且只能重新加载触发的组件。下面的代码就是为了实现这个想法。由于更改首先在中完成，因此必须在其他组件中反映出来

`

{/*父组件*/}
类父类扩展了React.Component{
构造函数（）{
超级（）；
此.state={
}
}
render（）{
返回(
);
}
}
导出默认父对象；
{/*1子组件*/}
从“React”导入{React}；
常量FirstComponent=（）=>{
常量handleChange=（事件）=>{
常量{name，value}=event.target
localStorage.setItem（名称、值）
}
返回(
所有搜索
);
}
导出默认组件；
{/*第二个子组件*/}
从“React”导入React；
从“react router dom”导入{NavLink}
类SecondComponent扩展了React.Component{
构造函数（）{
超级（）；
这个州={
tab1:localStorage.getItem（“tab1”），
tab2:localStorage.getItem（“tab2”），
}
}
render（）{
返回(
主页

所有搜索
{this.state.tab1}
{this.state.tab2}
);
}
}
导出默认组件；

---

`要重新渲染组件，标准方法是更改其状态。问题是-如果组件的状态没有更改，为什么要重新渲染它

---

我看到您正在使用本地存储—我建议您尽可能多地使用本地状态而不是本地存储来管理此类信息。

我已使用您的建议创建和阵列组件，并将其导入父组件，然后在一个子组件中呈现。我想将其他组件中的对象添加和减去到该数组组件中，就像我希望单击handleClick work，它会删除数组中包含该组件数组中指定id的对象，如果它们是form and submit，它会在该数组组件`{DataComponent}const Data=[{{u id:1，title:'aba'}]{first Component}在这里使用来自该数据组件的数据

{Add from 2}`

{/* 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;