javascript - ReactJS - 将对象键和值作为 Prop 传递给 div

Question

在我的 Class 组件中 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:

在组件 <div> 中作为 props.children 传递
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 上传递和打印这些其他 Prop 键和值作为文本？，以 结尾:

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

看起来 Prop 都已设置好并准备好打印，如在您的控制台上看到的那样。您可以通过 props.getPositionData(props.children).property_name_here 访问它们或解构它们

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上的问题 Prop (见评论部分):

Is there a way to print them ONLY after toggleFullScreen()

由于您已经在 Field 上有一个状态保存您的 fullScreen 的组件值(value)，在您的 Field组件，您需要通过 fullScreen Prop 以及 Position成分。例如， fullScreen={this.state.fullScreen} .返回 Position组件，在渲染时有一些条件语句。
例子:

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