javascript - 如何在不手动一一添加的情况下为组件中的每个元素绑定(bind)相同的事件？

Question

我的组件中有很多元素，因为它是一个 SVG，例如:

export default mySVG = ({ onPress }) => (
    <Svg>
        <Circle ref='circle1' r="40" />
        <Circle ref='circle2' r="30" />
        <Circle ref='circle3' r="34" />
        <Circle ref='circle4' r="35" />
        <Circle ref='circle5' r="100" />
        <Circle ref='circle6' />
        <Rect />
        <Path ref='path1' />
        <Circle ref='circle7' />
        <Circle ref='circle8' />
        <Circle ref='circle9' />
        <Rect />
        <Path ref='path2' />
    </Svg>
)

我想做的是将 onPress 事件绑定(bind)到 Circle 和 Path 中的每一个(Rect 除外)。

所以我无法将事件绑定(bind)到 <Svg>元素，此代码只是一个示例，它可能更大，因此可能很难添加 onPress={onPress} (或任何其他重复代码)一个一个。

有什么方法可以自动将同一事件绑定(bind)到每个事件吗？

---

编辑 1:我需要处理一些复杂的 SVG，这就是我避免将 props 一个一个地传递给那些组件的原因，它可能有上千个组件。

一旦组件被点击，它应该通过它的 ref作为参数。

我试图通过 setNativeProps 设置事件在 componentDidMount喜欢:

componentDidMount() {
    for(let key in this.refs) {
        this.refs[ key ].setNativeProps({
            onPress: this.props.onPress.bind(this, key)
        });
    }
}

但设置事件似乎不起作用，只能设置为 fill 之类的属性.

Answer 1

如果我对你的理解是正确的，你可以做的是创建一个执行 onPress 事件的自定义组件，然后你可以使用该组件而不是 Circle 和 Path 直接组件。如果您愿意，也可以覆盖 onPress 事件。

export default class CustomCircle extends Component {
  constructor(props) {
    super(props);
  }

  _onPress() {
    console.log('this is onPress');
    if (this.props.onPress) {
      this.props.onPress();
    }
  }

  render() {
    return <Circle { ...this.props } onPress={ this._onPress } />
  }
}

---

export default class CustomPath extends Component {
  constructor(props) {
    super(props);
  }

  _onPress() {
    console.log('this is onPress');
    if (this.props.onPress) {
      this.props.onPress();
    }
  }

  render() {
    return <Path { ...this.props } onPress={ this._onPress } />
  }
}

---

export default mySVG = ({ onPress }) => (
    <Svg>
        <CustomCircle ref='circle1' onPress={onPress} />
        <CustomCircle ref='circle2' />
        <CustomCircle ref='circle3' />
        <CustomCircle ref='circle4' />
        <CustomCircle ref='circle5' />
        <CustomCircle ref='circle6' />
        <Rect />
        <CustomPath ref='path1' />
        <CustomCircle ref='circle7' />
        <CustomCircle ref='circle8' />
        <CustomCircle ref='circle9' />
        <Rect />
        <CustomPath ref='path2' />
    </Svg>
)