Javascript 如何相对于映射的div放置组件？反应重排CSS

所以我尝试渲染一个div相对于另一个已映射的div。我的问题是，如果我将它放在.map方法中，组件中的内容就会改变

这是组件放置在return语句中的时间

我希望箭头指向它所指的特定玩家。这是我的密码：

//intro.js

const ShowPlayers = props => {
  console.log(props)
  props.players.sort(sort_by('rank', true, parseInt));
  let playerNames = props.players.map((player, index) => (
    <div key={index} className='playerSelector'>
      <button
      style={{float : 'right', marginTop: '10px'}}
      onClick={()=> props.currentId.dispatch(playerDrafted(player))}
      className='draftBtn'>Draft
      </button>
      <p><b> {player.firstName} {player.lastName} </b> <i
      className="far fa-file-alt"
      onClick={()=> props.currentId.dispatch(getPlayerProfile(player.id))}>
      </i></p>
      <hr/>
    </div>
    )
  )
  return (
    <div>
    {playerNames}
    </div>)
}

.
.
.

return (
        <div className='players'>
          <h1> Players Available </h1>
          <div className='dropdwnMenu'>
            <Button onClick={()=> this.props.menu
              ? this.closeMenu()
              : this.displayMenu()}>
              <PositionHeader />
            </Button>
              { this.props.menu ? (
              <div className='positionBtn'>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.players)}> Show All </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.qb)}> Quarterbacks </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.rb)}> Running Backs </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.wr)}> Wide Receivers </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.te)}> Tight Ends </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.def)}> DST </Button>
                <Button dropBtn onClick={()=>this.displayPosition(this.props.k)}> Kickers </Button>
              </div>
              )
              : null
            }
          </div>
          <PlayerProfile />
          <ShowPlayers players={this.props.displayPlayers} currentId={this.props} />
        </div>
      )

//app.css

.playerCard {
    position: absolute;
    background: #f5f5f5;
    border: 1px solid #63737d;
  z-index: 99;
  width: 300px;
  left: 300px;
  height: contain;
  font-size: 10px;
  border-radius: 8px;
  padding: 5px;
}
.playerCard:after, .playerCard:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.playerCard:after {
    border-color: rgba(245, 245, 245, 0);
    border-right-color: #f5f5f5;
    border-width: 8px;
    margin-top: -8px;
}
.playerCard:before {
    border-color: rgba(99, 115, 125, 0);
    border-right-color: #63737d;
    border-width: 9px;
    margin-top: -9px;
}

---

另一个组件在JS代码中称为PlayerProfile，在CSS代码中称为.playerCard

您当前的解决方案会导致为每个玩家按钮渲染新的游戏卡，而不是只重新渲染一个，因为它应该以react方式完成。 检查工作解决方案和下面的注释代码：

Content.js

Tab.js

Expand.js：

import React, { Component } from 'react';
/*Usually const are used to define inline styles in React. 
Here I used variables as we'll be able to change top positioning
each time whn component will update*/
let stylesBefore = {
   position: 'absolute',
   right: '-16px',
   top: '0',
   border: 'solid transparent',
   content: '',
   height: '0',
   width: '0',
   marginLeft: '50 %',
   borderRightColor: '#ddd',
   borderWidth: '15px',
   margin: '-19px 0 0 - 15p', 
}
let styles ={
  position: 'absolute',
  background: '#f5f5f5',
  border: '1px solid #63737d',
  zIndex: '99',
  width: '300px',
  top: '0',
  left: '119px',
  height: '50px',
  fontSize: '10px',
  borderRadius: '8px',
  padding: '5px',
  transform: 'translateY(-15px)'
}
export default class Expand extends Component {
  render() {
      if (this.props.show === true) {
         /*Change position based on recieved props*/     
         stylesBefore = { ...stylesBefore, top: this.props.top + 'px' }
         styles = { ...styles, top: this.props.top + 'px' }
         return (
           <div>
              /*as you are not able to manupulate styles of pseudo elements in react you need to use div instead*/
              <div style={stylesBefore}></div>
              <div style={styles}>{this.props.details}</div>
           </div>
         )
      }

  return null
 }
}

import React, { Component } from "react";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
  border: "1px solid black",
  position: "relative",
  width: "100px"
};

export default class Tab extends Component {
  constructor(props) {
    super(props);
      /* You need to use Ref forwarding to be able to set proper position of expanded field depending from screen positioning of clicked tab*/
      this.elementRef = React.createRef();
    }
   handleClick = () => {
   /*Getting top position of element and pass it to handleclick function fron Content.js*/
   let top = this.elementRef.current.getBoundingClientRect().top
   this.props.handleClick(top, this.props.data.details);
   };

   render() {
      return (
        <div style={styles} onClick={this.handleClick} ref={this.elementRef}>
           <p>{this.props.data.name}</p>
       </div>
    );
  }
}

import React, { Component } from 'react';
/*Usually const are used to define inline styles in React. 
Here I used variables as we'll be able to change top positioning
each time whn component will update*/
let stylesBefore = {
   position: 'absolute',
   right: '-16px',
   top: '0',
   border: 'solid transparent',
   content: '',
   height: '0',
   width: '0',
   marginLeft: '50 %',
   borderRightColor: '#ddd',
   borderWidth: '15px',
   margin: '-19px 0 0 - 15p', 
}
let styles ={
  position: 'absolute',
  background: '#f5f5f5',
  border: '1px solid #63737d',
  zIndex: '99',
  width: '300px',
  top: '0',
  left: '119px',
  height: '50px',
  fontSize: '10px',
  borderRadius: '8px',
  padding: '5px',
  transform: 'translateY(-15px)'
}
export default class Expand extends Component {
  render() {
      if (this.props.show === true) {
         /*Change position based on recieved props*/     
         stylesBefore = { ...stylesBefore, top: this.props.top + 'px' }
         styles = { ...styles, top: this.props.top + 'px' }
         return (
           <div>
              /*as you are not able to manupulate styles of pseudo elements in react you need to use div instead*/
              <div style={stylesBefore}></div>
              <div style={styles}>{this.props.details}</div>
           </div>
         )
      }

  return null
 }
}