React Native redux将元素的引用onPress发送到操作创建者

npm install redux react-redux

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  elementRef: null
};

// 定义一个reducer函数来处理状态变化
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ELEMENT_REF':
      return {
        ...state,
        elementRef: action.payload
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';

class MyComponent extends React.Component {
  onPressElement = () => {
    // 将元素的引用发送到操作创建者
    this.props.setElementRef(this.elementRef);
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onPressElement} ref={ref => this.elementRef = ref}>
          {/* 元素内容 */}
        </TouchableOpacity>
      </View>
    );
  }
}

// 定义一个action来设置元素的引用
const setElementRef = elementRef => ({
  type: 'SET_ELEMENT_REF',
  payload: elementRef
});

// 将Redux store中的状态映射到组件的props
const mapStateToProps = state => ({
  elementRef: state.elementRef
});

// 将action映射到组件的props
const mapDispatchToProps = {
  setElementRef
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);