Question

这是第一个世界问题。我可能会要求一些不可能的事情，但我决定至少提出这个问题。

我有一个像这样的反应组件：

function TextInput(props) {
  return <input type="text" {...props} />;
}

但我不希望人们在道具中传递意外的值，因为这可能会破坏输入。测试显然也很难。

所以我对此进行了重构。假设我只想允许name，value和placeholder。

function TextInput({value, name, placeholder}) {
  const inputProps = {value, name, placeholder};

  return <input type="text" {...inputProps} />;
}

但是我认为这看起来很奇怪而且不必要地重复，对吧？

问题：是否有更短/更好的方法来保持点差{...inputProps}，但仅包含我指定的值，而不重复键两次？并且不添加更多＆＃34;行＆＃34;代码

为什么我要这个？

我知道这很迂腐，我可以用2行和有些重复来做，但是我试图找到一个简短的好模式，我可以在更小和更大的组件中重复使用。

为什么我想要传播？因为它比列出所有道具更具可读性，甚至可能在道具太多时在元素内添加换行符。这对于内在的孩子来说更为显着，例如：

<div 
  foo="bar" 
  bar={foo} 
  z={y} 
>
  innerChildContent
</div>

我认为如果我可以将密钥保存到javascript对象或类似内容，那么它就更容易阅读。

Answer 1

修改：{value, name, placeholder}似乎无法自行运作。你也需要将它嵌入传播中。当我最初发布我的答案时，我想知道是不是这种情况，但我想我可以逃脱捷径。感谢Bram首先指出问题。

function TextInput({value, name, placeholder}) {
  return <input type="text" {...{value, name, placeholder}} />;
}

Answer 2

要使gyre的解决方案正常工作，您必须再次将参数包装到对象中，然后才能使用对象传播。

function TextInput({value, name, placeholder}) {
  return <input type="text" { ...{value, name, placeholder} } />;
}

CodePen

Answer 3

这就是有些人使用react +打字稿的原因。在我的情况下，我在界面中设置输入道具：

interface IUserSideBarProps {
    usersData: {
        FullName: string;
        Login: string;
        [propName: string]: any;
    }[];
    options: ISideBarOptions;
    currentUserLogin: string;
}

export class UserSideBar extends React.Component<IUserSideBarProps, undefined> {

但我不知道在普通的javaScript中它是否相同

只包括{... props}中的一些键

3 个答案: