Question

通常，我的React / Redux组件结构如下：

 .Component
  ├── Component.less
  ├── ComponentConnect.js
  └── ComponentUi.js

用于样式的文件，用于连接的文件以及用于UI的文件。这是我的连接组件：

import { connect } from 'react-redux';
import actions from '../../redux/actions';
import selectors from '../../redux/selectors';
import ComponentUi from './ComponentUi';

export const ComponentConnect = connect(
    (state) => {

        return {
            friend: state.User ? state.User.friends.includes(this.props.id) : false,
        };
    },
    (dispatch) => {
        return {};
    }
)(ComponentUi);

export default ComponentConnect;

这是我的UI组件：

import React from 'react';
import './Component.less';

class ComponentUi extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="Component">
                My stuff here
            </div>
        );
    }
}

export default ComponentUi;

当我想使用组件时，我叫ComponentConnect，它接收道具并将其传递给ComponentUi。如您所见，在ComponentConnect中，我尝试过滤Redux返回的数据，并尝试访问props

state.User ? state.User.friends.includes(this.props.id) : false

当然会返回错误，但是我想知道是否可以通过某种方式访问道具。

Answer 1

通过将props传递给组件作为第二个参数来调用mapStateToProps function，因此您可以执行以下操作：

(state, props) => {
    return {
        friend: state.User ? state.User.friends.includes(props.id) : false,
    };
},

React / Redux：连接组件内部的访问道具

1 个答案: