Tôi có một thành phần vùng chứa react-redux được tạo trong thành phần React Native Navigator. Tôi muốn có thể vượt qua trình điều hướng làm chỗ dựa cho thành phần vùng chứa này để sau khi nhấn một nút bên trong thành phần hiện tại của nó, nó có thể đẩy một đối tượng lên ngăn xếp điều hướng.

Tôi muốn làm điều này mà không cần phải viết tay tất cả mã soạn sẵn mà thành phần chứa react-redux cung cấp cho tôi (và cũng không bỏ lỡ tất cả các tối ưu mà react-redux sẽ cung cấp cho tôi ở đây).

Mã thành phần vùng chứa mẫu:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

Và tôi muốn có thể gọi thành phần như thế này từ bên trong renderScenehàm điều hướng của mình :

<SearchViewContainer navigator={navigator}/>

Trong mã vùng chứa ở trên, tôi cần có thể truy cập vào phần hỗ trợ đã chuyển này từ bên trong mapDispatchToPropshàm.

Tôi không thích lưu trữ trình điều hướng trên đối tượng trạng thái redux và không muốn chuyển phần hỗ trợ xuống thành phần trình bày.

Có cách nào tôi có thể chuyển một chỗ dựa cho thành phần vùng chứa này không? Ngoài ra, có bất kỳ cách tiếp cận thay thế nào mà tôi đang bỏ qua không?

Cảm ơn.

mapStateToPropsvà mapDispatchToPropscả hai đều coi ownPropslà đối số thứ hai.

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

Để tham khảo

Bạn có thể chuyển đối số thứ hai vào đối số mapStateToProps(state, ownProps)này sẽ cấp cho bạn quyền truy cập vào các đạo cụ được chuyển vào thành phần trong mapStateToProps

Có một số vấn đề cần hiểu khi thực hiện việc này với chữ viết, vì vậy đây là một ví dụ.

Một điểm cần lưu ý là khi bạn chỉ sử dụng DispatchToProps (và không ánh xạ bất kỳ đạo cụ trạng thái nào), điều quan trọng là không bỏ qua tham số trạng thái, (nó có thể được đặt tên bằng tiền tố gạch dưới).

Một vấn đề khác là tham số ownProps phải được nhập bằng giao diện chỉ chứa các đạo cụ được chuyển - điều này có thể đạt được bằng cách chia giao diện đạo cụ của bạn thành hai giao diện, ví dụ:

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

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

Thành phần có thể được khai báo bằng cách truyền một tham số:

<MyComponent value={event} />

Sử dụng Decorator (@)

Nếu bạn đang sử dụng trình trang trí, đoạn mã dưới đây đưa ra một ví dụ trong trường hợp bạn muốn sử dụng trình trang trí cho kết nối redux của mình.

@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {

Nếu bây giờ bạn kiểm tra, this.props.Foobạn sẽ thấy giá đỡ đã được thêm vào từ nơi Barthành phần được sử dụng.

<Bar Foo={'Baz'} />

Trong trường hợp this.props.Foonày sẽ là chuỗi 'Baz'

Hy vọng điều này làm rõ một số điều.