0

我需要将一些道具转移到我的组件中。

type Props = {
  icon: number,
  onChangeText: Function,
  onEndEditing: Function,
  placeholder: string,
  secureTextEntry?: boolean
};
export default function LRInput(
  props: Props = { ...props, secureTextEntry: false } // I've tried to do it in this way, but it hasn't worked 
) { /*function body*/ }

您可以看到secureTextEntry 是一个可选参数。所以，我想为这个道具定义一些默认值。我怎样才能做到这一点？

4

2 回答 2

0

不幸的是，你将不得不在解构时这样做，（或幸运的是？）

type Props = {
  icon: number,
  onChangeText: Function,
  onEndEditing: Function,
  placeholder: string,
  secureTextEntry?: boolean
};
function LRInput(
  { secureTextEntry = false, ...props }: Props
) { console.log(secureTextEntry) }

LRInput({ icon: 5 })
LRInput({ icon: 5, secureTextEntry: true })

编辑

为了解决您对默认值位于其余道具之后的担忧，将 typescript 设置为目标 es5 不是问题，因为其余语法被转换为如下所示的内容，

function LRInput(_a) { 
    var _b = _a.secureTextEntry;
    var secureTextEntry = _b === void 0 ? false : _b; 

    /* code to handle rest omitted */

    console.log(secureTextEntry); 
}

如您所见，通过上述转换，传播的顺序无关紧要，因此我的代码片段表现正确。但是，由于在其他键之前捕获“其余”键是没有逻辑意义的，因此 ES2018 标准和 Typescript 要求您将其放在解构键的后面{ secureTextEntry = false, ...rest }。

（我第一次错过了这个，因为我复制编辑了您的代码并且它运行良好，因为即使它检测到“编译错误”，本网站上的打字稿编译器也设置为发出，并且因为我实际上并没有...props在函数内部使用，所以我没有'没有意识到其余参数转换没有正常工作。您应该自己看到转译。）

于 2019-06-17T12:17:20.847 回答
0

我根本不会使用解构，而是将可选属性放在一个新对象上：

export default function LRInput(props: Props) {
     const defaultedProps: Props = { secureTextEntry: false, ...props };
    /* function body */
}
于 2019-06-17T18:56:34.513 回答