如何同时使用属性扩展和提取属性

huangapple
go评论96阅读模式
英文:

How to use prop spreading and extracting props at the same time

问题

我有两个组件，像这样

  1. const TextLarge = (props) => { // props are classes, color and children
  2.     return <Text
  3.                classes={'text-large-style'}
  4.                {...props}>
  5.                {props.children}
  6.            </Text>
  7. }
  9. const Text = ({
  10.     children,
  11.     color,
  12.     classes,
  13. }) => {
  14.     return <p
  15.                className={clsx('text-styles', classes)}
  16.                style={{ color: color }}>
  17.                {children}
  18.            </p>
  19. }

现在，当我将一个 class 传递给 <TextLarge />

  1. <TextLarge
  2.     classes='some-special-style'>
  3.     Foo
  4. </TextLarge>

这会覆盖 classes='text-large-style'，因为 {...props} 将 classes='some-special-style' 展开到 <TextLarge/> 之后 classes='text-large-style'。

是否有一种（React/优雅）的方法将 classes 从 props 中取出，以便实现以下的效果

  1. const TextLarge = (props) => { // props are classes, color, and children
  2.     return <Text
  3.                classes={clsx('text-large-style', props.classes)}
  4.                {...props}> // no classes in here
  5.                {props.children}
  6.            </Text>
  7. }

但仍然将其余的 {...props} 展开到 <Text /> 中？
我知道这可能会改变顺序，使得 classes={clsx('text-large-style', props.classes)} 覆盖 {...props}

  1. const TextLarge = (props) => { // props are classes, color, and children
  2.     return <Text
  3.                {...props}
  4.                classes={clsx('text-large-style', props.classes)}>
  5.                {props.children}
  6.            </Text>
  7. }

但我想要更多的控制。

英文:

I have two components like this

  1. const TextLarge = (props) =&gt; { // props are classes,color and children
  2.     return &lt;Text
  3.                classes={&#39;text-large-style&#39;}
  4.                {...props}&gt;
  5.                {props.children}
  6.            &lt;/Text&gt;
  7. }
  9. const Text = ({
  10.     children,
  11.     color,
  12.     classes,
  13. }) =&gt; {
  14.     return &lt;p
  15.                className={clsx(&#39;text-styles&#39;, classes)}
  16.                style={{color: color}}&gt;
  17.                {children}
  18.            &lt;/p&gt;
  19. }

Now, when I pass a class to &lt;TextLarge /&gt;

  1. &lt;TextLarge
  2.     classes=&#39;some-special-style&#39;&gt;
  3.     Foo
  4. &lt;TextLarge&gt;

This overwrites classes=&#39;text-large-style&#39; because {...props} spreads classes=&#39;some-special-style into &lt;TextLarge/&gt; after classes=&#39;text-large-style.

Is there a (React/elegant) way to take classes out of props, so something like

  1. const TextLarge = (props) =&gt; { // props are classes,color and children
  2.     return &lt;Text
  3.                classes={clsx(&#39;text-large-style&#39;, props.classes)}
  4.                {...props}&gt; // no classes in here
  5.                {props.children}
  6.            &lt;/Text&gt;
  7. }

yet still spreading the rest of the {...props} into &lt;Text /&gt;?
I know that could change the order, making classes={clsx(&#39;text-large-style&#39;, props.classes)} overwrite {...props}

  1. const TextLarge = (props) =&gt; { // props are classes,color and children
  2.     return &lt;Text
  3.                {...props}
  4.                classes={clsx(&#39;text-large-style&#39;, props.classes)}&gt;
  5.                {props.children}
  6.            &lt;/Text&gt;
  7. }

but I want more control.

答案1

得分: 1

是的，你可以使用解构和剩余属性（rest）来取出 classes：

  1. const TextLarge = ({classes, ...rest}) => {
  2.     // ...
  3. };

实际上，你可能还想移除 children：

  1. const TextLarge = ({classes, children, ...rest}) => {
  2.     // ...
  3. };

然后 ...rest 将不包括 classes（或 children），如果你想要传递它们，你可以在明确的属性中包括 classes：

  1. const TextLarge = ({classes, children, ...rest}) => {
  2.     return (
  3.         <Text {...rest} classes={`text-large-style ${classes ?? ""}`}>
  4.             {children}
  5.         </Text>
  6.     );
  7. };
英文:

> Is there a (React/elegant) way to take classes out of props

Yes, you can use destructuring with a rest target:

  1. const TextLarge = ({classes, ...rest}) =&gt; {
  2.     // ...
  3. };

Actually, you probably want to remove children as well:

  1. const TextLarge = ({classes, children, ...rest}) =&gt; {
  2.     // ...
  3. };

Then ...rest won't include classes (or children), and you can include classes in your explicit prop (if you want to pass them on):

  1. const TextLarge = ({classes, children, ...rest}) =&gt; {
  2.     return (
  3.         &lt;Text {...rest} classes={`text-large-style ${classes ?? &quot;&quot;}`}&gt;
  4.             {children}
  5.         &lt;/Text&gt;
  6.     );
  7. };

huangapple
  • 本文由 发表于 2023年2月8日 17:56:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/75384046.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定