Question

想知道是否最好将propType定义放在容器中，其中包含所有prop逻辑或者实际使用props的presenter。我可以看到两者的论点。

在容器中，您可以在一个地方跟踪所有道具逻辑而在演示者确认他们将被正确使用。

感谢您的投入。

为清晰起见而更新

例如-container.js

import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import ButtonPresenter from './some/file';

const mapStateToProps = (store, props) => {
  return ({
    example: Number(5),
  });
};

const mapDispatchToProps = (dispatch, props) => ({
  onClick: id => { console.log(id) },
});

ButtonPresenter.propTypes = {
  onClick: PropTypes.func.isRequired,
  example: PropTypes.number.isRequired,
}

const ButtonContainer = connect(mapStateToProps, mapDispatchToProps)(BoxPresenter);

export default ButtonContainer;

优点

所有逻辑都在1个位置

2个不同的容器可以与演示者一起使用

缺点

演示者可能需要一个仅为地图
的容器数组所知的类型

例如-presenter.js

import React from 'react';
import PropTypes from 'prop-types';

const ButtonPresenter = ({example, onClick}) => {
  return (
    <button onClick={onClick}>{example}</button>
  );
};

ButtonPresenter.propTypes = {
  onClick: PropTypes.func.isRequired,
  example: PropTypes.number.isRequired,
}

export default ButtonPresenter;

专业人员
     使用演示者
为所有内容写入1个地方的propTypes
缺点

不是灵活的，propTypes可以被视为逻辑，然后逻辑在容器和演示者中

Answer 1

如果它是 Class Component ，我想在类创建后将propTypes和defaultProps放在最顶部：

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
    static propTypes = {
        prop1: PropTypes.string.isRequired,
        prop2: PropTypes.bool,
        prop3: PropTypes.func
    };

    defaultProps = {
        prop2: false,
        prop3: () => {}
    };

    constructor() {}
    render() {}
}

export default MyComponent;

或者对于功能组件，我想创建变量并将其保留在导入之后：

import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
    prop1: PropTypes.string.isRequired,
    prop2: PropTypes.bool,
    prop3: PropTypes.func
};

const defaultProps = {
    prop2: false,
    prop3: () => {}
};

const MyComponent = props => {

}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

export default MyComponent;

因此，它非常清楚您应该通过prop传递给组件的内容。这是您组件的摘要。

Answer 2

我没有在你的问题上看到Redux与PropTypes之间的关系。

无论如何，我会在任何可能被重用/使用的React组件上指定PropTypes。对于我来说，在绑定到商店的最高组件上进行操作

是没有意义的

这可能是基于意见的

[编辑：]
我可能会遗漏一些东西，但仅仅是afaik只有根组件（层次结构上的更高）应绑定到商店。因此，我不知道你将如何在其他任何地方消费它，从而将属性传递给它。总而言之，只有第二个片段对我有意义，组件的API自包含在文件中，使合同清晰。 eiffel.com/values/design-by-contract

Propuxs位置的Redux最佳实践

2 个答案: