Javascript 如何为每个组件实例的元素分配唯一ID

我有一个ReactJS组件，它有多个实例。 我想通过点击改变组件元素的css

我试图通过ID引用特定的组件元素，但问题是当前，ID或每个组件实例都是相同的，这会导致所有组件都发生更改

我正在考虑向每个组件传递一个唯一的引用，但我不知道如何在元素的html id中更改它。在角度上，解决方案如下所示：

<span id="{{ 'object-' + $component_idx }}"></span>

在React中是否有类似的功能可以实现这一点？还是有更好的方法来实现我的目标

以下是我现在正在做的：

正在父级中调用组件实例：

创建条目组件：

类条目扩展了React.Component{ 构造器{ 超级作物； this.state={首选项：4}； } 优先权{ //更改表情符号大小 设oldPref=this.state.preference； 如果idx==this.state.preference{ this.state.preference=4； document.getElementByIdemo+idx.style.transform=scale1； }否则，如果idx！=this.state.preference{ this.state.preference=idx； document.getElementByIdemo+idx.style.transform=scale2； 如果oldPref！=4{ document.getElementByIdemo+oldPref.style.transform=scale1； } } } 渲染{ 回来 此。首选项r0}>

---

如果不使用ID设置样式，可以在styles属性上使用检查器，onClick可以直接更改状态，例如：

---

因此，通过消除对preferencer函数的需要。

您可以添加更多代码吗？您如何呈现多个组件？我认为这取决于您希望如何更改样式。我不明白为什么您会为每个组件使用唯一标识符。正如@MukeshSoni所建议的，您可以添加更多代码吗？谢谢您的反馈，我已经添加了我的代码！很有趣，但它会产生错误：style prop需要从样式属性到值的映射，而不是字符串。例如，当使用JSX时，style={{marginRight:spacing+'em'}}。很抱歉，您可以替换为style={this.state.preference==1？{transform:scale2}:{}

<Entry
    title={instance_title}
    number={i}
  />

class Entry extends React.Component {
  constructor(props) {
    super(props);
    this.state = { preference: 4 };
  }


preferencer(idx) {
    // change emoji size
    let oldPref = this.state.preference;
    if (idx == this.state.preference) {
      this.state.preference = 4;
      document.getElementById("emo" + idx).style.transform = "scale(1)";
    } else if (idx != this.state.preference) {
      this.state.preference = idx;
      document.getElementById("emo" + idx).style.transform = "scale(2)";
      if (oldPref != 4) {
        document.getElementById("emo" + oldPref).style.transform = "scale(1)";
      }
    }
  }


  render() {
    return (
      <Wrapper>
        <EmojiWrap id="emo0" onClick={() => this.preferencer(0)}>
           If you're not using the ID's for styling, you can use a checker on the styles property and onClick can change the state directly, as such:


<EmojiWrap style={this.state.preference === 1 ? {transform: "scale(2)"} : {}} 
onClick={() => this.setState({preference: 1})} >
...
</emojiWrap>

//repeat this for every emoji, changing the number  and emoji inside only