Reactjs React中自定义属性的内联访问

在React中，是否可以这样进行smth：

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

我想将

数据值

的值替换为

？

更新

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

假设

this.props.value

是一个数组，我有很多这样的div。现在我需要检查

this.props.value.contains（[data value]）

---

如果无法访问

数据值

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

this.props.value.contains（'bar-1'）、this.props.value.contains（'bar-2'）、this.props.value.contains（'bar-3'）

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

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

---

您可以使用react的

ref

功能执行类似操作：

---

可能更简单。我建议您仔细阅读答案，寻找一种可能的方法。

从哪里可以获得

数据值

？它是硬编码的。实际上，我需要它。假设this.props.value是一个数组，我需要检查它是否包含数据值。现在我有N个这样的div。我需要检查每个值，然后您可以将其用作

barVariable

，正如答案所示。您打算在jQuery中做的事情是可以的，但在现代JS中不行，

data

属性用于与非React代码交互。是否真的需要

数据

？如果你在回答你的问题时有问题，考虑用你的实际代码更新问题。谢谢。我在应用代码方面没有问题。您提供的辅助函数中的

bar

未知。我刚刚对{this.props.value==='bar'？'foo'：'}'bar'作为参数传递到那里，

value

。但如果这太复杂了，是的，直接使用它是合理的。我想就是这样。你的回答既回答了可能的问题，又提出了更好的方法。谢谢

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

...

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

<div className={classnames({ 'foo': this.props.value.includes('bar') })}>

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;

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