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

Question

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

我尝试通过ID来引用具体的组件元素，但问题是目前，ID或每个组件实例都是相同的，这导致所有组件都发生了变化。

我正在考虑将唯一引用传递给每个组件，但我不知道如何在元素的 html id 中更改它。在 Angular 中，解决方案是这样的:

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

在 React 中有类似的东西可以实现这个吗？或者是否有更好的方法来实现我想要做的事情？

这是我现在正在做的事情:

在父级中调用组件实例:

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

创建一个 Entry 组件:

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)}>
           🤢{" "}
         </EmojiWrap>
         <EmojiWrap id="emo1" onClick={() => this.preferencer(1)}>
           😶
         </EmojiWrap>
         <EmojiWrap id="emo2" onClick={() => this.preferencer(2)}>
           😍
        </EmojiWrap>
      </Wrapper>
     );
    }
 }
export default Entry;

谢谢!

Answer 1

如果您不使用 ID 来设置样式，则可以在 styles 属性上使用检查器，并且 onClick 可以直接更改状态，如下所示:

<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

因此消除了对 preferencer 函数的需求。