React - 如何比较不同组件之间的 props

Question

如何比较两个独立组件之间的 props 是否具有相同的值？

1- 我所寻求的可行吗？

2- 如果没有，我还能如何完成以下问题：

故事：

• 我有一个汽车对象数组。 每辆车的名称在<CarList /> 组件上显示为<li />。 点击每个<li/> 就会显示汽车的颜色

• 我有一个 <Question /> 组件，它呈现：“什么车是（这里是随机颜色）”？

界面变化： 我怎么能写一个方法：

• 检查 <CarList /> 的 props.color 是否 === <Question /> 的 props.color
• 然后它会触发 UI 更改，例如：
• onClick：If 汽车的颜色与问题的颜色相匹配：将<li /> 更改为绿色（即：背景色），else 将其更改为红色。

我正在努力（想知道是否可能）比较来自不同组件的道具 + 编写一个检查和执行上述 UI 更改的方法。

这是反映上述解释的代码：也是sandbox

// Garage
export default class Garage extends Component {
  state = {
    cars: [
      { name: "Ferrari", color: "red", id: 1 },
      { name: "Porsche", color: "black", id: 2 },
      { name: "lamborghini", color: "green", id: 3 },
      { name: "McLaren", color: "silver", id: 4 },
      { name: "Tesla", color: "yellow", id: 5 }
    ]
  };

  handleShuffle = () => {
    this.setState({
      cars: [...this.state.cars.sort(() => Math.random() - 0.5)]
    });
  };

  render() {
    const { cars } = this.state;
    const car = cars.map(car => (
      <CarList key={car.id} make={car.name} color={car.color} />
    ));

    const guess = cars
      .slice(2, 3)
      .map(car => <Question key={car.id} color={car.color} />);
    return (
      <>
        <div>{guess}</div>
        <button onClick={this.handleShuffle}>load color</button>
        <ul>{car}</ul>
      </>
    );
  }
}

// CarList
class CarList extends Component {
  state = {
    show: false
  };

  handleShow = () => {
    this.setState({ show: true });
    console.log(this.props);
    // check for props equality here

    //desired result for <li /> would be
    // className={ correctColor ? 'green' : 'red'}
  };

  render() {
    console.log("car color props:", this.props.color);
    const { make, color } = this.props;
    const { show } = this.state;
    return (
      <li onClick={this.handleShow}>
        {make}
        <span className={show ? "show" : "hide"}>{color}</span>
      </li>
    );
  }
}

// Question
const Question = ({ color }) =>
  console.log("question color prop:", color) || <h1>What car is {color}</h1>;

Answer 1

有很多方法可以做到这一点，但最简单的方法是将问题中的颜色发送到汽车组件。

https://codesandbox.io/s/my4wmn427x

Answer 2

是的，您可以将正确的颜色传递给CarList 组件或CarList 是否正确的标志。检查我的沙盒。

https://codesandbox.io/s/92xnwpyq6p

基本上，我们可以将isCorrect 属性添加到CarList，它的值为correctCar.color === car.color，然后我们使用它来确定我们应该将其渲染为绿色还是红色。