0

在 React 中，是否可以这样做：

<div className={ this.props.value === ??? ? 'foo' : '' } data-value="bar">

我想把值data-value而不是???

更新

只是为了解释为什么我需要这个。

假设this.props.value是一个数组，我有很多这样的 div。现在我需要去检查是否this.props.value.contains([data-value])。

如果无法访问，data-value我需要更改每个元素的条件：this.props.value.contains('bar-1'), this.props.value.contains('bar-2'), this.props.value.contains('bar-3')

4

2 回答 2

1

ref你可以使用react的功能来做这样的事情。见：

import React, { Component } from "react";

class Temp extends Component {
  state = {
    dataValue: ""
  };

  constructor(props) {
    super(props);
  }

  getAttributeValue = element => {
    this.setState({ dataValue: element.dataset.value });
  };

  render() {
    const { value } = this.props;
    const { dataValue } = this.state;
    return (
      <div
        ref={this.getAttributeValue}
        className={value === dataValue ? "foo" : ""}
        data-value="bar1"
      >
        {dataValue} Test
      </div>
    );
  }
}

export default Temp;

有关工作示例，请查看：https ://codesandbox.io/s/1qo6vxv8l3

类被应用。可以通过检查员确认。

尽管我认为在您的特定情况下您提到data-value将是硬编码的，所以我不知道如何

我需要更改每个元素的条件

会很痛苦。所以可能在做

<div className={ this.props.value === {valuePassedAsProp} ? 'foo' : '' } data-value={valuePassedAsProp}>

可能更简单。我建议通过这个答案寻找可能的方法。

于 2018-11-13T07:29:38.453 回答
0

这是不可能且不需要的，因为属性值在与其使用的相同功能范围内可用：

<div className={ this.props.value === barVariable ? 'foo' : '' } data-value={barVariable}>

如果这是一项常见任务，可以创建辅助函数：

const classAndDataValue = (valueProp, value) => ({
  className: valueProp === value ? 'foo' : '',
  'data-value': value
});

...

<div {...classAndDataValue(this.props.value, 'bar')}>

属性的使用data适用于遗留的 jQuery，但不适用于现代 JavaScript，尤其是 React。classnameshelper 可用于有条件地构造类字符串。如果this.props.value是数组：

<div className={classnames({ 'foo': this.props.value.includes('bar') })}>
于 2018-11-12T13:06:01.977 回答