javascript - React 组件中的 CSS 在新行发生变化

Question

我有一个 React 组件，其中包含内联 block div 元素，每个元素都有一个边框以提供“分隔符”视觉效果。但是，如果它达到父组件的最大宽度，无论是通过初始加载还是进一步调整窗口大小，该行的最后一项都不应该有右边框。它应该看起来像这样:

元素 1 |元素 2 |第 3 项 |第 4 项

元素 5 |元素 6 |第7项

我读过有关使用 jquery 来检测某个元素何时发生 offsetTop 值更改的内容，但我不确定它将如何与 React 组件交互。任何指导表示赞赏。

Answer 1

好吧，这里的技巧是使用 ref 来获取元素的左偏移量，如果元素的左偏移量是 0 则添加 leftmost 类。计算在组件安装后完成(在 componentDidMount 方法中)。

此外，我添加了 version 属性，该属性在每次窗口大小调整时都会递增(去抖以避免过度更新，如果需要，您可以降低超时或完全删除它)以强制重新计算状态调整浏览器窗口大小时的边框。

确保在全页模式下运行演示，看看调整浏览器窗口大小时会发生什么。

class Item extends React.Component {
  constructor(props){
    super(props); 
    
    this.state = {
      isLeftMost: false
    };
    
    this.recalculateBorder = () => {
      if(this.el){
        this.setState({isLeftMost: this.el.offsetLeft === 0});
      }
    }
  }
  
  componentDidMount(){
    this.recalculateBorder();
  }
  
  componentDidUpdate(){
    this.recalculateBorder();
  }
  
  shouldComponentUpdate(nextProps, nextState){
    return (nextProps.label !== this.props.label)
        || (nextProps.version !== this.props.version)
        || (nextState.isLeftMost !== this.state.isLeftMost);
  }
  
  render(){
    let cl = this.state.isLeftMost ? "item leftmost" : "item";
    return (
      <div className={cl} ref={el => this.el = el}>{this.props.label}</div>
    );
  }
}

class Container extends React.Component {
  constructor(props){
    super(props);
    this.state = { version: 0 };
    
    let _updateDimensions = () => {
      this.setState({version: this.state.version+1 }); 
    }
    
    this.updateDimensions = _.debounce(_updateDimensions, 25);
  }
  
  componentDidMount() {
     window.addEventListener("resize", this.updateDimensions);
  }

  componentWillUnmount() {
     window.removeEventListener("resize", this.updateDimensions);
  }
  
  render(){
    let items = [];
    for(let i = 0; i<30; i++){ 
      items.push(<Item key={i} label={"item " + i} version={this.state.version} />);
    }
    return (
      <div className="container">
        {items}
      </div>
    );
  }
}
  
ReactDOM.render(<Container />, document.getElementById("root"));

.container {
  position: relative;
}

.item {
  display: inline-block;
  padding: 0 5px;
  border-left: solid 2px red;
 }

.item.leftmost {
  border-left-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

<div id="root"></div>