ReactJS - 将对象键和值作为道具传递给 div

Question

在我的 Class 组件 Field.jsx render() 中，我正在使用 <Flipper>（一个抽象的翻转动画）扩展我的 <Position> 组件，如下所示：

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 上将这些其他props 键和值作为文本传递和打印？，以结束：

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 访问它们或解构它们

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 道具的问题（参见 cmets 部分）：

有没有办法只在 toggleFullScreen() 之后打印它们

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

例子：

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