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

因此消除了对首选项功能的需求。

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

1 个答案: