Question

React建议Transfer Props。整齐！

我怎样才能转移除一个人以外的所有人？

render: function(){
  return (<Cpnt {...this.propsButOne}><Subcpnt one={this.props.one} /></Cpnt>);
}

Answer 1

您可以使用以下技术来使用一些道具并传递其余道具：

render() {
  var {one, ...other} = this.props;
  return (
    <Cpnt {...other}>
      <Subcpnt one={one} />
    </Cpnt>
  );
}

Source

Answer 2

您需要做的是创建道具对象的副本并删除您不想要的密钥。最简单的方法是使用omit中的lodash，但你也可以为此编写一些代码（创建一个新的对象，其中包含除了一个之外的所有道具键）。

使用省略（顶部有几个选项，具体取决于您导入的包/ ES口味）：

const omit = require('lodash.omit');
//const omit = require('lodash/omit');
//import { omit } from 'lodash';

...
render() {
    const newProps = omit(this.props, 'one');
    return <Cpnt {...newProps}><Subcpnt one={this.props.one} /></Cpnt>;
}

Answer 3

如果你有很多道具，你不想要...rest例如defaultProps，将它们全部写入两次可能很烦人。相反，您可以使用当前道具上的简单循环自己创建它：

let rest = {};
Object.keys(this.props).forEach((key, index) => {
    if(!(key in MyComponent.defaultProps))
       rest[key] = this.props[key];
});

Answer 4

谢谢@villeaka！

这是我如何将您的解决方案用于其他人的示例，以更好地了解其用法。

我基本上用它来创建一个无状态的包装组件，然后将其道具传递给内部组件（卡）。

我需要包装器，因为另一个顶级组件内部的渲染逻辑像这样使用该包装器：

<TopLevelComponent>
  {/* if condition render this: */}
  <CardWrapper {...props}> {/* note: props here is TLC's props */}
    <Card {..propsExceptChildren}>
      {props.children}
    </Card>
  </CardWrapper>
  {/* if other condition render this: */}
  {/* ... */}
  {/* and repeat */}
</TopLevelComponent>

在几种情况下，确定包装器中H4之后的内容（请参见下面的实际渲染的节点树）。

因此，基本上，我不想通过编写下面示例中{children}之前的整个部分来复制代码，因为顶层条件组件的每个条件分支都呈现了包装的多个变体从上面的示例：

const CardWrapper: React.FC<IRecentRequestsCardProps> = (props) => {
  const { children, ...otherProps } = props;
  return (
    <Card {...otherProps} interactive={false} elevation={Elevation.ONE}>
      <H4>
        <a href="/">Unanswered requests</a>
      </H4>
      {children}
    </Card>
  );
};

React渲染函数中的具体用法：

if (error)
  return (
    <CardWrapper {...props}>
      <SimpleAlert title="Eroare" intent={Intent.DANGER}>
        {error}
      </SimpleAlert>
    </CardWrapper>
  );

if (loading)
  return (
    <CardWrapper {...props}>
      <NonIdealState
        icon="download"
        title="Vă rog așteptați!"
        description="Se încarcă cererile pentru articole..."
      />
    </CardWrapper>
  );

if (!data)
  return (
    <CardWrapper {...props}>
      <NonIdealState
        icon="warning-sign"
        title="Felicitări!"
        description="Nu există cereri fără răspuns."
      />
    </CardWrapper>
  );

// etc.

因此，以上代码仅将H4标头添加到包装器的子级之前，还将已传递给它的道具向下传递到内部Card组件中。

Answer 5

尝试一下：

function removeProps(obj, propsToRemove) {
   let newObj = {};
   Object.keys(obj).forEach(key => {
   if (propsToRemove.indexOf(key) === -1)
   newObj[key] = obj[key]
   })
   return newObj;
}

const obj = {nome: 'joao', tel: '123', cidade: 'goiania'}

const restObject = removeProps(obj, ['cidade', 'tel'])

console.log('restObject',restObject)

restObject
{
  nome:"joao"
}

Answer 6

我目前找到的最简单的方法：

const obj = {
  a: '1',
  b: '2',
  c: '3'
}

const _obj = {
  ...obj,
  b: undefined
}

这将导致 _obj 拥有除 b 之外的所有道具

React Transferring Props除了一个

6 个答案: