React-如何在各个组件之间比较道具

Question

How can I compare if the props between two separate components have the same value?

1- Is what I'm seeking doable?

2- If not, how else could I accomplish the ask below:

The story:

• I have an array of car objects. Each car's name is displayed as <li /> on a <CarList /> component. Upon click on each <li/> the car's color is revealed

• I have a <Question /> component that renders: "What car is (random color here)"?

UI change: How could I write a method that:

• Checks if the props.color of <CarList /> === the props.color of <Question />
• Then it fires a UI change such as:
• onClick : If the car's color matches the question's color: change the <li /> to green (ie: background-color), else change it to red.

I'm struggling (wondering if it's possible) to compare props from different components + writing a method that checks and executes the UI change above.

This is the code reflecting the explanation above: Also here's the 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

Yes, you can pass the correct color to the CarList component or the flag whether the CarList is a correct one. Check my sandbox.

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

Basically we can add isCorrect prop to CarList which has value of correctCar.color === car.color and we use it to determine whether we should render it green or red.

Answer 2

Theres many ways to do this but the simplest is to send the color in the question down to the car component.

https://codesandbox.io/s/my4wmn427x