他们正在研究纸，石头，剪刀的游戏。我想在按下按钮之一后在“结果”组件中显示其ID。我该怎么办？

App.js

import React,{ Component } from "react";
import "./App.scss";
import SubmitInfo from "./SubmitInfo";
import ResultInfo from "./ResultInfo";

class App extends Component {
  constructor(props) {
    super(props);

    this.test = this.test.bind(this);
  }

  test = id => {
    //return <Result id={this.props.id}></Result>
    console.log("test");
  };

  render() {
    return (
      <div>
        <div classname="board">
          <div classname="title_row">
            <h1 classname="title">Kamień,Papier,Nożyce</h1>
          </div>
        </div>
        <div classname="board">
          <div classname="submit_row">
            <SubmitInfo id="papier" click={this.test} />
            <SubmitInfo id="kamien" click={this.test} />
            <SubmitInfo id="nozyce" click={this.test} />
            <ResultInfo id={this.test} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

SubmitInfo.js

转移到id道具并单击事件，然后渲染三个带有不同图标的按钮。

import React from "react";
import styles from "./submit.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faHandPaper,faHandScissors,faHandRock
} from "@fortawesome/free-solid-svg-icons";
import ResultInfo from "./ResultInfo";

function Submit({ id,click }) {
  if (id === "nozyce") {
    return (
      <button classname="submit" onClick={click}>
        <FontAwesomeIcon classname="icon" icon={faHandScissors} />
      </button>
    );
  } else if (id === "papier") {
    return (
      <button classname="submit" onClick={click}>
        <FontAwesomeIcon classname="icon" icon={faHandPaper} />
      </button>
    );
  } else if (id === "kamien") {
    return (
      <button classname="submit" onClick={click}>
        <FontAwesomeIcon classname="icon" icon={faHandRock} />
      </button>
    );
  }
}

export default SubmitInfo;

ResultInfo.js

在这里，我想显示单击的按钮的ID。

import React,{ Component } from "react";

class ResultInfo extends Component {
  render(props) {
    return (
      <div>
        {" "}
        {this.props.id}
        {console.log(this.props.id)}
      </div>
      //<div></div>
    );
  }
}

export default ResultInfo;