ReactJS - Objektschlüssel und Werte als Requisiten an div übergeben

Question

In meiner Klassenkomponente Field.jsx render()erweitere ich meine <Position>Komponente mit <Flipper>(einer abstrakten Flip-Animation) wie folgt:

import { Flipper, Flipped } from 'react-flip-toolkit'
import { Position } from "./Position";
import "./css/Position.css";

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

    this.state = {
      fullScreen: false,
    };
  }

toggleFullScreen() {
    this.setState({ fullScreen: !this.state.fullScreen });
  }
...

render() {
    const { players } = this.props;
    const { fullScreen } = this.state;
    if(players){
      return (
       <div className="back">
         
          <div className="field-wrapper" >
            <Output output={this.props.strategy} />

            <Flipper flipKey={fullScreen}>
              <Flipped flipId="player">

                <div className="field-row"> 
                   {this.getPlayersByPosition(players, 5).map((player,i) => (
                      <Position
                        key={i} 
                        className={fullScreen ? "full-screen-player" : "player"}
                        getPositionData={this.getPositionData}
                        toggleFullScreen={this.toggleFullScreen.bind(this)}
                      >{player.name}</Position>
                    ))} 
                </div>

              </Flipped>
            </Flipper>

          </div>
        </div>
      );

  }else{
    return null}
  }

---

Wenn ich es rendere, erhalte ich anklickbare Elemente aus der zugeordneten Funktion getPlayersByPosition(), wie folgt:

---

Und wenn ich auf jedes Element klicke, wird es zu einem Div mit dem Spielernamen erweitert:

Welches als props.children an Komponente übergeben wird <div>

---

Position.jsx

import React from "react";
import "./css/Position.css";


export const Position = props => (
  <div
    className={props.className}
    onClick={() => {
        props.getPositionData(props.children);
        props.toggleFullScreen();
        console.log(props.getPositionData(props.children))
    }}
  >
    {props.children}
  </div>
);

---

getPositionData()Gibt jedoch ein Objekt mit vielen Elementen zurück, wie in der obigen Konsole dargestellt:

{matches: 7, mean: 6.15, price: 9.46, value: 0.67, G: 3, …}

---

FRAGE :

Wie gehe ich und Druckarbeiten andere Requisiten Schlüssel und Werte auf der erweiterten lila divals Text ?, so dass Ende mit :

Patrick de Paula
matches: 7
mean: 6.15
price:9.46
....

---

HINWEIS:

Position.css

.position-wrapper {
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: lighter;
  font-size: 1.4em;
  color: #888888;
  flex: 1;
  /*outline: 1px solid #888888;*/
}


.player {
  height: 4em;
  width: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: lighter;
  font-size: 1.4em;
  /*background-color: #66CD00;*/
  color: #ffffff;
}

.full-screen-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-image: linear-gradient(
    45deg,
    rgb(121, 113, 234),
    rgb(97, 71, 182)
  );
}

Answer 1

Sieht so aus, als wären die Requisiten fertig und können gedruckt werden, wie auf Ihrer Konsole zu sehen. Sie können über sie zugreifen props.getPositionData(props.children).property_name_hereoder sie zerstören

export const Position = props => {

    const { matches, mean, price } = props.getPositionData(props.children);

    return (
        <div
            className={props.className}
            onClick={() => {
                props.getPositionData(props.children);
                props.toggleFullScreen();
                console.log(props.getPositionData(props.children))
            }}
        >
            <p>Name: {props.children}</p>
            <p>Matches: {matches}</p>
            <p>Mean: {mean}</p>
            <p>Price: {price}</p>
        </div>
    )
}

In Bezug auf das Problem auf der fullScreenRequisite (siehe Kommentarbereich):

Gibt es eine Möglichkeit, sie NUR nach toggleFullScreen () zu drucken?

Da Sie bereits einen Status für die FieldKomponente haben, der Ihren fullScreenWert enthält, müssen Sie für Ihre FieldKomponente auch die fullScreenRequisite an die PositionKomponente übergeben. zB , fullScreen={this.state.fullScreen}. Zurück zur PositionKomponente, haben Sie beim Rendern einige Bedingungsanweisungen.

Beispiel:

<>
  {props.fullScreen && 
    <p>Name: {props.children}</p>
  }
</>