javascript - 如何相对于映射的 div 放置组件？ react Redux CSS

Question

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

这是组件被放置在返回语句中的时候。

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

//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。

Answer 1

您当前的解决方案导致为每个播放器按钮呈现新的 playCard，而不是只重新呈现一个，因为它应该以 react 方式完成。 检查this工作解决方案和注释代码如下:

Content.js

import React, { Component } from 'react';
import Expand from "./Expand";
import Tab from './Tab'

  /* you get it from dispatcher*/ 

const Players = [
{'name': 'Player 1','details': 'Player 1 datails'},
{'name': 'Player 2','details': 'Player 2 datails'},
{'name': 'Player 3','details': 'Player 3 datails'},
{'name': 'Player 5','details': 'Player 5 datails'},
]

const styleDiv = {
  position: 'relative',
  border: '1px solid black',
  width: 'max-content',
}

export default class Content extends Component  {
  constructor() {
    super()
      this.state={
      expanded: false,
      topPos: 0
      }
  }
  expandTab = (top, details) => {
  this.setState({expanded: true, topPos: top, details: details})
  };

  render() {
     return (
        /*Create tab for each entry in array of Players*/
        <div style={styleDiv} className="my-div">
          {Players.map((pl, i) => (
          <Tab key={i} data={pl} handleClick={this.expandTab} />
          ))}
        /*Render 'playCard'*/
          <Expand show={this.state.expanded} top={this.state.topPos} 
           details= {this.state.details}/>
       </div>
     )
  }
 }

Tab.js

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

展开.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
 }
}