如何检查 React 组件的所有实例是否具有相同的状态值？答案

【问题标题】：How to check if all instances of a React Component have the same value for their state?如何检查 React 组件的所有实例是否具有相同的状态值？
【发布时间】：2022-01-10 08:03:50
【问题描述】：

所以现在，在我的 App 文件中，我有这个：

{items.map(el => (
                    <Item
                        prop1={foo}
                        prop2={bar}
                        el={baz}
                    />
                ))}

在<Item> 组件中，我有这个：

            <span className={finishedClass ? "finishedItem" : ""}>
                {props.el}
            </span>

其中finishedClass 是一个状态变量。

所以我的问题是，我如何检查 finishedClass 是否适用于由于 items.map 而生成的每个 <Item> 组件？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

所以，您基本上想知道所有Item 组件中的所有finishedClass 状态值是否为真。这可以简化为，如果任何 Item 组件将 finishedClass 设置为 false，您将执行某个操作。

所以，你可以做的是，将一个函数作为 prop 传递给 Item 组件，如下所示：

{items.map(el => (
                    <Item
                        prop1={foo}
                        prop2={bar}
                        el={baz}
                        setFinishedClassToFalse={()=>{/*your statements*/}}
                    />
                ))}

这个函数setFinishedClassToFalse 将被Item 组件调用当且仅当它的状态值finishedClass 为假时。显然，这比我所描述的要多一点。但这应该给你一个开始。

【讨论】：

【解决方案2】：

父组件可以通过具有功能的父道具与子组件进行通信。您可以在父组件中的onFinished 属性下面看到代码，其中包含handleFinished() 函数值。该功能将成为帮助子组件与父组件通信的桥梁。在子组件上，您必须运行 onFinished 道具才能在父组件上触发 handleFinished 函数。在下面的代码中，props.onFinished 的触发器是当用户点击 <span> 时。

import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "react-flexbox-grid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: "test" };
  }

  render() {
    const items = ["red", "green", "blue"];
    const handleFinished = (e, index) => {
      this.setState({ data: e });
      console.log(this.state);
    };
    return (
      <Grid>
        {items.map((el, index) => (
          <Child
            prop1={"test"}
            prop2={"test1"}
            el={el}
            onFinished={(e) => handleFinished(e, index)}
          />
        ))}

        <div>{this.state.data.toString()}</div>
      </Grid>
    );
  }
}

const Child = (props) => {
  // example for your finishedClass value state
  const finishedClass = true;

  return (
    <span
      onClick={() => props.onFinished(finishedClass)}
      className={finishedClass ? "finishedItem" : ""}
    >
      {props.el}{" "}
    </span>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

【讨论】：

【解决方案3】：

由于 finishedClass 是一个状态变量，如果你只是在组件内使用 console.log(finishedClass) 它就可以完成工作

【讨论】：