Javascript Reactjs，从同级更新所有子组件

我对reactjs进行排序，我不知道如何重新绘制所有子组件，以便只有一个选定组件保持活动状态，我可以更新当前组件，但其他组件不会更改。下面是示例代码。有人能帮忙/解释一下如何做对吗

nodejs、webpack、last reactjs

App.js

import React, { Component } from "react";
import Parent from "./Parent";

class App extends Component {
    render() {
        return(
            <Parent />
        )
    }
}

export default App;

import React，{Component}来自“React”；
从“/Parent”导入父项；
类应用程序扩展组件{
render（）{
返回(
)
}
}
导出默认应用程序；

Parent.js

import React, { Component } from "react";
import Child from "./Child";

class Parent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            popularity: {"sorting": "desc", "active": true},
            rating: {"sorting": "desc", "active": false},
            reviews_count: {"sorting": "desc", "active": false},
        };
    }

    updateFilters = () => {
        // ??
    };

    render() {
        return (
            <div>
                <Child type="popularity" sorting={this.state.popularity.sorting} active={this.state.popularity.active} updateFilters={this.updateFilters} />
                <Child type="rating" sorting={this.state.rating.sorting} active={this.state.rating.active} updateFilters={this.updateFilters} />
                <Child type="reviews_count" sorting={this.state.reviews_count.sorting} active={this.state.reviews_count.active} updateFilters={this.updateFilters} />
            </div>
        )
    }
}

export default Parent;

import React，{Component}来自“React”；
从“/Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
此.state={
流行度：{“排序”：“desc”，“active”：true}，
评级：{“排序”：“描述”，“活动”：假}，
检查计数：{“排序”：“描述”，“活动”：假}，
};
}
updateFilters=（）=>{
// ??
};
render（）{
返回(
)
}
}
导出默认父对象；

Child.js

import React, { Component } from "react";

class Child extends Component {

    handleClick = () => {
        this.props.updateFilters();
    };

    render() {
        let activeStr = "";

        if (this.props.active) {
            activeStr = "active"
        } else {
            activeStr = "inactive";
        }

        return(
            <div onClick={() => this.handleClick}>
                {this.props.type} {activeStr} {this.props.sorting}
            </div>
        );
    }
}

export default Child;

import React，{Component}来自“React”；
类子扩展组件{
handleClick=（）=>{
this.props.updateFilters（）；
};
render（）{
让activeStr=“”；
如果（此.props.active）{
activeStr=“active”
}否则{
activeStr=“非活动”；
}
返回(
这个.handleClick}>
{this.props.type}{activeStr}{this.props.sorting}
);
}
}
导出默认子对象；

假设您正在尝试将单击类型的活动标志设置为true，并将所有其他类型设置为false

---

this.handleClick}>

这不正确，因为您没有调用函数。这可以纠正为：

<div onClick={() => this.handleClick()}>

或

您可以忽略handleClick并调用prop函数：

<div onClick={() => this.props.updateFilters(this.props.type)}>

---

您的子组件可以被大量重构为纯功能组件，使其更加简单：

const Child = ({ type, active, updateFilters, sorting }) => (
  <div onClick={() => updateFilters(type)}>
    {type} {active ? "active" : "inactive"} {sorting}
  </div>
);

constchild=（{type，active，updateFilters，sorting}）=>(
更新过滤器（类型）}>
{type}{active？“active”：“inactive”}{sorting}
);

工作解决方案：

  updateFilters = type => {
    this.setState(prevState => {
      return Object.keys(prevState).reduce(
        (result, key) => ({
          ...result,
          [key]: { ...prevState[key], active: key === type }
        }),
        {}
      );
    });
  };

const Child = ({ type, active, updateFilters, sorting }) => (
  <div onClick={() => updateFilters(type)}>
    {type} {active ? "active" : "inactive"} {sorting}
  </div>
);