如何在几乎没有变化的情况下重用 React 组件

Question

I want to recreate something similar to this using React. I also want to use 1 Player component for 2 players. Since there is an increment and decrement button for both players, how can I let App.js distinguish the difference between the 2 Players? I understand I can probably pass it in as an argument but where do I set that?

This is what I have for App.js and it's working for, obviously, a single player:

constructor(props) {
    super(props);
    this.state = {
      player1: 20,
      player2: 20
    };
  }

  increment = () => {
      this.setState({
        player1: this.state.player1 + 1,
        player2: this.state.player2
  };

Answer 1

You can pass an argument to your increment function indicating which player it is

 increment = (p) => {
      this.setState({
        [p]: this.state[p] + 1,
  };

and pass a handler to Player instance accordingly:

return (
   <Player increment={() => { this.increment('player1') }} />
   <Player increment={() => { this.increment('player2') }} />
)

in your Player component you would do something like

const Player = (props) => {
    return (
      // I assume you would have some button somewhere
      <button onClick={() => { props.increment() }}
    )

}

Answer 2

You just need to make your state changing method take some arguments. Taking player and amount means that you decide what player and how much to change the life totals when you call this method.

updateLife = (player, amount) => {
  this.setState({
    [player]: this.state[player] + amount,
  })
}

Then call that when you render your common LifeTracker component that tracks just one life total, and provides a callback when someone takes an action to change that life total. All you have to call your updateLife method in the callback with the right arguments.

<LifeTracker
  life={this.state.player1}
  onChange={(amount) => this.updateLife('player1', amount) }
/>
<LifeTracker
  life={this.state.player2}
  onChange={(amount) => this.updateLife('player2', amount) }
/>

Lastly, inside your LifeTracker component, just use the props as they are unique to just that life tracker.

function LifeTracker({life, onChange}) {
  return <div>
    <div>{life}</div>
    <div onClick={() => onChange(1)}>up</div>
    <div onClick={() => onChange(-1)}>down</div>
  </div>
}

Answer 3

Some pseudo code for you -

const Player = ({ increment, player }) => {
  const onClick = () => increment(player.id);

  return (
    <div>
      {player.name}
      <button onClick={onClick}>Increment</button>
    </div>
  );
}

const App = () => {
  const [players, setPlayers] = useState([{ name: 'Player 1', id: 1, points: 0 }, { name: 'Player 2', id: 2, points: 0 }];

  const increment = (playerId) => {
    const newPlayers = players.map(player => {
      if (player.id === playerId) {
        player.points = player.points + 1;
      }

      return player;
    });

    setPlayers(newPlayers);
  };

  return players.map(player => <Player increment={increment} player={player} />);
}

So you restructure your state a little bit so each player is an object in an array. Then you pass in the player's id when you want to increment their points in the parent component. Let me know if you have any further questions.

Answer 4

Here's what I suggest: you can create two different increment functions: one for your first player, and one - for a second one.

constructor(props) {
    super(props);
    this.state = {
      player1: 20,
      player2: 20
    };
  }

  incrementFirstPlayer = () => {
      this.setState({
        player1: this.state.player1 +1 )}
  };

  incrementSecondPlayer = () => {
      this.setState({
        player2: this.state.player2 +1 )}
  };

This also can be your parent component. You can then create two children (player) components and pass props (number and increment callback) to them.