我有一个通用的原型(在lib中),多个组件可以导入和使用。

ListPropType = PropTypes.shape({
    name: PropTypes.string,
    creatorId: PropTypes.string.isRequired,
    ...
});

1)对于某些组件,我想指定名称,对于某些组件,我不需要。

2)另外,对于某些组件,我想在形状中添加其他道具。

是否有一种简单或通用的方式来处理这些用例,除了涉及不同的字段外,不涉及所有内容的重复?

#1楼 票数:0 已采纳

不必这样做,但我想您可以编写一种工厂方法来生成形状,这样便可以将isRequired即时添加到字段中。

const getShape = (requiredFields, extraFields) => {
  const template = {
    name: PropTypes.string,
    creatorId: PropTypes.string.isRequired,
  };
  Object.keys(template).forEach(key => {
    if (requiredFields.includes(key)) {
      template[key] = template[key].isRequired;
    }
  });
  return PropTypes.shape({
    ...template,
    ...extraFields,
  });
}

// Create propType with 'name' required and extra date field
ListPropType = getShape(
  ['name'],
  { date: PropTypes.string }
);

您甚至可以通过将起始模板作为getShape函数的参数来进一步抽象。

  ask by Paul translate from so

未解决问题?本站智能推荐:

1回复

嵌套的PropType是否需要Required?

假设我已定义此PropType: 如果需要该数据结构,则该嵌套结构的每个级别的isRequired属性是必需的,还是isRequired的顶层isRequired包含内部的所有内容?
1回复

根据需要标记PropTypes形状

所以我试图为我的组件对象添加一个形状。 该对象从服务器加载,因此从一开始就不存在。 但是当我将形状添加到 Proptypes 时。 它不断抛出错误,将其标记为必需,但事实并非如此。 shape或objectOf是否objectOf自动添加isRequired值? 和形状: 我仍然收到错误: 确实,
1回复

通过路线作为可重用组件的道具

我有以下组成部分。 我想使其可重用,因此可以在应用程序的不同部分使用它...具有不同的路线。 组件: 我有两个问题。 首先,我需要将哪种PropType传递给PropType。 另外我还需要做什么? 显然现在它适用于硬编码的路由。 但是我需要具有动态性,并被称为要在其中使用它的
1回复

如何进行可重用的proptype验证?

假设我有一个名为Logo的父组件,它包含两个子组件,分别是Image和Text 。 下面的代码显示了我如何验证父组件的道具。 这工作正常,做我真正想要的。 但我有很多其他组件,我做同样的孩子验证坚果只有改变是PropTypes.oneOf([Image, Text])数组。 因此,在
2回复

可以在proptype形状中使用默认值吗?

是否可以为具有所需键值对和默认键值对的对象定义类型? 例子:const myComponent = (props) => { const { myObject: { someRequiredString, someNotRequiredString, } }
1回复

如何使用已由另一个propType接口定义的动态键和值验证propType形状?

假设我有一个用户对象的以下 prop-type 接口: 然后我想验证 props 接收到的全局用户对象,它由几个单独的用户对象组成,其中的键是随机数字 ID。 例如: 我知道我可以使用 Prop Type 自定义验证器轻松验证数字键。 但问题是:如何使用自定义处理程序验证我的全局用户对象,该处理程序
4回复

如果我添加PropTypes,是否需要检查typeof?

我有一个道具onNotifyChange它是一个函数,我在输入的onChange中调用它。 它有一个func的 PropType 。 调用onNotifyChange ,是否需要检查typeof 或者只是检查它是否是假的? PropTypes.bar是否不需要检查typeof foo === 'b
2回复

道具验证中缺少功能组件中的道具

尽管已声明propTypes,但Eslint抛出eslint(react / prop-types)错误。 我正在使用eslint-plugin-react 我看过其他一些类似的问题,以及关于原型的皮棉规则,但它们并没有解决我的问题。 家长提供道具 我不希望出现这些错误,但确实如此