Reactjs，从兄弟更新所有子组件答案

【问题标题】：Reactjs, update all child components from siblingReactjs，从兄弟更新所有子组件
【发布时间】：2019-09-17 04:14:22
【问题描述】：

我在 reactjs 上进行排序，我不明白如何重绘所有子组件，以便只有一个选定的组件保持活动状态，我可以更新当前的，但其他的不会改变。这是示例的代码。任何人都可以帮助/解释如何正确地做吗？

nodejs、webpack、最后一个 reactjs

App.js

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

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

export default App;

父.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;

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;

【问题讨论】：

标签： javascript reactjs ecmascript-6 components

【解决方案1】：

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

<div onClick={() => this.handleClick}> 这是不正确的，因为您没有调用该函数。这可以更正为：

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

然后你可以更新handleClick来传递Type：

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

或

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

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

一旦您将类型传回updateFilters，我们就可以简单地迭代之前的状态属性，将所有类型的活动标志设置为false。但是，如果 Key 与被点击的 Type 匹配，我们将其设置为 true。

  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>
);

工作解决方案： https://codesandbox.io/s/4j83nry569

【讨论】：