只包含来自 {...props} 的一些键

Question

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

我有一个这样的 React 组件：

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} />;
}

不过我觉得这看起来很奇怪而且没有必要重复，对吧？

问题：有没有办法shorter/better保持传播{...inputProps}，但是只包括我指定的值，没有重复键两次？并且无需添加更多 "lines" 代码。

我为什么要这个？

我知道这是迂腐的，我可以分两行完成并重复一些，但我正在尝试找到一个简短、好的模式，我可以在更小和更大的组件中重复使用。

为什么我要展开？ 因为它比列出所有道具更易读，甚至可能在元素太多时不得不在元素内添加换行符道具。这在内部 children 中更为显着，如下所示：

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

我认为如果我可以保留 javascript objects 或类似内容的键，那么阅读起来会容易得多。

Answer 1

编辑： 看起来 {value, name, placeholder} 不能单独使用。您还需要将其嵌入到跨页中。我想知道我最初发布答案时是否属于这种情况，但我想我也许可以走捷径。感谢第一个指出问题。

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

Answer 2

要使的解决方案生效，您必须将参数再次包装到一个对象中，然后才能使用对象传播。

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

CodePen

Answer 3

这就是为什么有些人使用 react + typescript 的原因。在我的例子中，我在界面中设置了输入道具：

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

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

但我不知道它是否与普通版相同javaScript

只包含来自 {...props} 的一些键

only include some keys from {...props}

javascript

reactjs

ecmascript-6

react-jsx