Question

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

1-我寻求的是可行的吗？

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

故事：

我有一系列汽车对象。每个汽车的名称在<li />组件上显示为<CarList />。在每个<li/>上点击后，汽车的颜色就会显示出来
我有一个渲染的<Question />组件：“什么车（这里颜色随机）？”

UI更改： 我该如何写一个方法：

检查<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

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

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

基本上，我们可以将isCorrect属性添加到CarList的{{1}}中，并使用它来确定应将其渲染为绿色还是红色。

Answer 2

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

https://codesandbox.io/s/my4wmn427x

React-如何比较各个单独组件之间的道具

2 个答案: