如何更改React元素的属性

Question

我创建了一个render方法，该方法将许多动态创建的“ InfoWindow”元素添加到基于Class的对象中。

每个InfoWindow元素都有唯一的ID和键。

我也有许多带有相应ID和键的“标记”元素。

当前所有的信息窗口都有一个“ visible = {false}”的道具

当我单击标记时，将调用一个输出标记ID的函数。

我想找到具有相关ID的InfoWindow并将可见性设置为{true}

是否可以使用其键或ID找到相关的InfoWindow元素，然后调用setAttribute（或等效属性）？

我已经尝试在DOM中搜索ID，但是Google Maps不会以这种方式呈现，所以我认为必须有一种更React-y的方式来做到这一点？

let visibilityFunction = () => {
  this.changeVisibility(01);
};

changeVisibility = (e) => {
    console.log(e);
    //this currently outputs the ID (01)
}


render() {

    return( 
        <Parent>
            <InfoWindow
                visible={false} 
                key={01-iw} 
                id={01-iw}
             />
            <Marker
                key={01} 
                id={01}
                onClick={visibilityFunction}
             />
        </Parent>
    );
}

Answer 1

就像我在评论中说的那样。在此处使用状态来更新可见性。

class MyComponent extends React.Component {
  state = { visibleWindows: {}, currentWindows: [1] };

  changeVisibility = id => {
    this.setState(prevState => ({
      visibleWindows: {
        ...prevState.visibleWindows,
        [id]: !prevState.visibleWindows[id]
      }
    }));
  };
  render() {
    const { currentWindows, visibleWindows } = this.state;
    return (
      <div>
        {currentWindows.map(win => (
          <ChildWindow key={win} id={win} isVisible={!!visibleWindows[win]} onChange={this.changeVisibility} />
        ))}
      </div>
    );
  }
}

class ChildWindow extends React.Component {
  changeVisibility = () => {
    this.props.onChange(this.props.id)
  }
  render() {
    <React.Fragment>
      <InfoWindow
        visible={this.props.isVisible}
        key={`${win}-iw`}
        id={`${win}-iw`}
      />
      <Marker
        key={win}
        id={win}
        onClick={this.changeVisibility}
      />
    </React.Fragment>
  }
}

Here's a rudimetary example for you to poke around with :)