Reactjs 如何比较react中两个组件的状态变量？

我有一个组件，它的状态有一个存储随机值0-3的变量，我的app.js中有两个，现在我想比较这两个组件的状态。请帮忙

这是我的组件

import React from "react";

export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
  shoot: 0
};
}
shooter = () => {
this.setState({ shoot: Math.floor(Math.random() * Math.floor(3)) });
}

render() {
return (
  <div>
    <h1>{this.state.shoot}</h1>
    <button onClick={() => this.shooter()}>shoot it</button>
  </div>
);
}
}

从“React”导入React；
导出默认类player扩展React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
拍摄：0
};
}
射手=（）=>{
this.setState（{shoot:Math.floor（Math.random（）*Math.floor（3））}）；
}
render（）{
返回(
{这个州，开枪}
这个.shooter（）}>开枪
);
}
}

这是我的app.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";

class App extends Component {
render() {
return (
  <div className="App">
    <div>
      <Player />
      <Player />
    </div>
  </div>
);
}
}

export default App;

import React，{Component}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/Player”导入播放器；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

---

我如何比较这两个

中的

状态。shot

？我想检查两个

状态.shot

是否相等。

我建议将状态放在应用程序组件中。通过这种方式，您可以对数据进行更大的控制，例如：

应用程序组件：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";

class App extends Component {
    constructor(...args) {
super(...aan rgs);
this.state = {
    // create array of all your players
        players : [{shoot :0}, {shoot :0}]
    }
}
shooter = (id) => {
let players = this.state.player
/// maping the new players array
players.map(element, index => {
    if(id == index){
        element.shoot = Math.floor(Math.random() * Math.floor(3)
    }
}
this.setState({players) });
}

checkPlayers = () =>{
    // this is example... you can loop over your array and find what you need
    if(this.state.players[0].shoot == this.state.players[1].shoot){
        return true
    }
    else{
        return false
    }
}

render() {
return (
  <div className="App">
    <div>
    {this.state.players.map(i => {
        // pass the values to the player component (don't forget the id)
        return <Player shoot={i.shoot} shooter={this.shooter} id={i}/>
    }
    </div>
  </div>
);
}
}

export default App;

import React，{Component}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/Player”导入播放器；
类应用程序扩展组件{
构造函数（…参数）{
超级（…aan rgs）；
此.state={
//创建所有玩家的阵列
玩家：[{shoot:0}，{shoot:0}]
}
}
射手=（id）=>{
让玩家=this.state.player
///映射新玩家数组
players.map（元素，索引=>{
if（id==索引）{
element.shoot=Math.floor（Math.random（）*Math.floor（3）
}
}
这个.setState（{players}）；
}
棋手=（）=>{
//这是一个示例…您可以在阵列上循环并找到所需内容
if（this.state.players[0].shoot==this.state.players[1].shoot）{
返回真值
}
否则{
返回错误
}
}
render（）{
返回(
{this.state.players.map（i=>{
//将值传递给播放器组件（不要忘记id）
返回
}
);
}
}
导出默认应用程序；

播放器组件：

import React from "react";

export default class player extends React.Component {

setShooter = () => {
    this.props.shooter(this.props.id)
}

render() {
return (
  <div>
    <h1>{this.props.shoot}</h1>
    <button onClick={this.setShooter}</button>
  </div>
);
}
}

export default player;

从“React”导入React；
导出默认类player扩展React.Component{
设定值=（）=>{
this.props.shooter（this.props.id）
}
render（）{
返回(
{这个。道具。射击}
首先，shooter函数需要在构造函数中手动绑定，或者将其更改为arrow函数。您的问题不清楚，无法理解您的期望/问题