ReactJS-객체 키와 값을 소품으로 div에 전달

Question

내 클래스 구성 요소 Field.jsx render()에서 , (추상 된 플립 애니메이션)을 <Position>사용하여 구성 요소를 <Flipper>다음과 같이 확장합니다.

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}
  }

---

렌더링 할 때 getPlayersByPosition()다음과 같이 매핑 된 함수에서 클릭 가능한 항목을 가져옵니다 .

---

그리고 각 항목을 클릭하면 플레이어 이름이있는 div로 확장됩니다.

컴포넌트에서 props.children으로 전달됩니다. <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()그러나 위의 콘솔에서 볼 수 있듯이 차례에 많은 항목이있는 객체를 반환합니다.

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

---

질문 :

어떻게 통과 인쇄는 확장 된 보라색 다른 소품 키와 값 논제 않는 div너무와 끝으로? 텍스트로를 :

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

---

노트:

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

소품이 모두 설정되어 콘솔에 표시된대로 인쇄 할 준비가 된 것 같습니다. 당신은을 통해 액세스 할 수 있습니다 props.getPositionData(props.children).property_name_here하거나 destructure

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>
    )
}

fullScreen소품 에 대한 문제에 대해 (댓글 섹션 참조) :

toggleFullScreen () 후에 만 ​​인쇄하는 방법이 있습니까?

이미 값 Field을 보유 하는 컴포넌트에 상태가 있으므로 컴포넌트 에서 prop도 컴포넌트 에 전달해야합니다 . 예 : . 구성 요소로 돌아가서 렌더링 할 때 몇 가지 조건문이 있습니다.fullScreenFieldfullScreenPositionfullScreen={this.state.fullScreen}Position

예:

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