跨共享组件的 React js 和 PropTypes 重复答案

【问题标题】：React js and PropTypes repetition across shared components跨共享组件的 React js 和 PropTypes 重复
【发布时间】：2015-07-27 17:19:36
【问题描述】：

我已经创建了一些反应组件，因此，父级...获得了一些道具...

随后的每个孩子都会使用这些道具中的大部分，然后是孩子的孩子。

**--> Parent**
(required props)
**-------> child**
(required props)
**-------> child**
(required props)
**------------> sub child**
(required props)
**------------> sub child**

那些“必需的道具”对于所有这些组件都是相同的。每当我在 Parent 中更新道具时，我都必须进入所有这些孩子并更新到（如果需要的话），这似乎有点过分了。当然，它们是必需的和需要的，但好奇是否存在不需要这种重复的快捷方式/或实现。有什么想法吗？

谢谢

【问题讨论】：

我不明白这个问题。你是什么意思更新属性？你的意思是更改属性名称？像物理更改javascript文件中的名称一样？如果您正在谈论从父级到子级的 props 值更新，那么这就是 state 的用途，它应该根据该父级 state 值更新任何子 props。
是 {...this.props} 您正在寻找的东西吗？将所有道具传递给下一个组件。

标签： javascript reactjs

【解决方案1】：

spread operator 可能很方便：

import OtherComponent from './OtherComponent';

const MyComponent = ({ foo }) => (<OtherComponent {...foo} />);

MyComponent.propTypes = {
    foo: PropTypes.shape({ ...OtherComponent.propTypes }),
};

export default MyComponent;

【讨论】：

【解决方案2】：

这很简单。如果您编写 es6 代码，您可以使用您导入的组件的形状

import React, { PropTypes } from 'react';    
import { Button } from 'components';

const NewComponent = (props) => {
    return (
        {props.buttons.map((button) =>
            <div>
                <Button {...props} />
            </div>
        )}
    );
}

NewComponent.propTypes = {
    buttons: PropTypes.arrayOf(PropTypes.shape({ Button }.propTypes))
};

【讨论】：

使用来自其他组件的 propTypes 是不安全的，因为它们可能会在生产构建中被删除。

【解决方案3】：

您可以将道具类型存储在您合并到每个组件的propTypes 中的对象中：

var requiredPropTypes = {
    foo: ...,
    bar: ...
};

var ComponentA = React.createClass({
    propTypes: {
        ...requiredPropTypes,
        // ComponentA's prop types follow
        // ...
    },
    // ...
});

var ComponentB = React.createClass({
    propTypes: {
        ...requiredPropTypes,
        // ComponentB's prop types follow
        // ...
    },
    // ...
});

propTypes 的值只是一个对象。如何构建该对象完全取决于您。

【讨论】：

嗯。这似乎是可行的。但我不想让这个价值全球化......否则，我怎么能把它融入每个孩子？感谢您的回复，顺便说一句，谢谢。
如何组织代码取决于您自己。无需将共享类型设为全局，只需在需要它们的地方可访问即可。如果您正在使用模块，请将共享道具设为模块并在需要的地方导入。