javascript - ReactJS - 将对象键和值作为 props 传递给 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:

它作为 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 上传递并打印这些其他 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 属性的问题(请参阅评论部分):

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

由于您在 Field 组件上已经有了一个保存您的 fullScreen 值的状态，因此在您的 Field 组件上，您需要传递fullScreen 属性以及 Position 组件。例如，fullScreen={this.state.fullScreen}。回到 Position 组件，在渲染时有一些条件语句。

示例:

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