Question

如何根据当前元素的状态有条件地添加标题，即当前元素的text-overflow：ellipses属性被触发时？

<div className="shortDiv" 
     :title={isTruncated(CURRENT_ELEMENT) ? long_data : null}>
  {{long_data}}
</div>

我无法使用ref="shortDiv" ... isTruncated(this.shortDiv.current)，因为 isTruncated 中的this[ref]会返回 undefined 。我已经检查了this，它是反应组件，但refs是一个空对象。

所以，我使用的方法是这样的：

  isTruncated (ref) {
    let el = this[ref].current

    return (el.offsetWidth < el.scrollWidth)
  }

它附加的元素的一个例子是：

<figcaption ref="figcaption-name" 
            title={this.isTruncated('figcaption-name')? name: null}>

Answer 1

使用州。

android {
    ...
    productFlavors {
        appFlavor1 {
            //MatchingFallbacks is required because of its dependencies to the project 'library'
            matchingFallbacks = ['libFlavor1', 'libFlavor2']
            //Don't use dependencies node here, it will add dependencies to the other flavors
        }
        appFlavor2{/*no need to use matchingFallbacks here, there is no dependencies to project 'library'*/}
    }
    ...
}

dependencies {
    appFlavor1Implementation project(':library')
}

或者像这样的州来管理你的整个元素

constructor(props){
    super(props);
    this.state = { 
        elementContent: <div>CONTENT HERE</div>,
        title: "TITLE",
    }

那么当你改变元素的状态时，它会动态改变内容。

constructor(props){
    super(props);
    this.state = { 
        element_to_truncate:{
            content:  <div>CONTENT HERE</div>,
            title: "TITLE",
            is_truncated: false,
            other_variables: ...
        }
    }

然后在您想要处理isTruncated（）vs long_data的任何地方，将状态设置为值，以便它始终更改。所以，也许：

<div className="shortDiv" 
     :title={this.state.elementTitle}>
</div>

无需使用ref或currentElement业务。

访问反应

1 个答案: