第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在包裝器中設(shè)置樣式組件的樣式

在包裝器中設(shè)置樣式組件的樣式

qq_笑_17 2021-08-20 17:45:39
我想向樣式化的按鈕添加動畫和特定高度。問題是，myStyledButton是一個包裝器，可以根據(jù)type樣式為React Semantic UI Buttons的道具呈現(xiàn)多個預(yù)樣式按鈕之一。在此處查看帶有復(fù)制的 CodeSandbox：https://codesandbox.io/embed/practical-haibt-oz9sl事情是它得到從樣式ActionButton，但它并不適用于任何風(fēng)格我穿上const AnimatedButton = styled(StyledButton)。但是，如果我在沒有包裝器的情況下嘗試同樣的事情，直接通過導(dǎo)入BaseButton, 并創(chuàng)建 a AnimatedBaseButton，這個可以工作，但刪除了具有type返回預(yù)樣式按鈕的道具的模塊化。我在這里和 google/github 上搜索過，但沒有反映這一問題的問題。我知道我可以在 上添加一個animation屬性StyledButton并傳遞它，但是對于真正的代碼庫，這是不可能的。提前致謝！編輯：添加了 Codesandbox 而不是代碼示例。
查看完整描述

2 回答

?
不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗 獲得超10個贊

快速修復(fù)：

在StyledButton.js：


render() {

  const {

    content,

    icon,

    iconPosition,

    onClick,

    type,

    ...otherProps // take base props passed through wrapper

  } = this.props;


  // ...


  return (

    <ButtonToDisplay

      {...otherProps} // spread it firstly here so below props can override

      onClick={onClick}

      content={content}

    />

  );

}

為什么有效：

如您所見，styled(comp)''我們用來設(shè)置組件樣式的語法實(shí)際上是一個底層的 HOC 組件，它接收一個組件并返回另一個組件。


因此，當(dāng)您制作在 astyled component和之間進(jìn)行攔截的包裝器時real component，您需要允許props庫生成的包裝器通過該包裝器。


查看完整回答
反對 回復(fù) 2021-08-20
?
ITMISS

TA貢獻(xiàn)1871條經(jīng)驗 獲得超8個贊

您...在破壞時忘記了（擴(kuò)展運(yùn)算符）this.props


export default class StyledButton extends React.Component {

  render() {

    //     added ... (spread operator) 

    const {type, ...additionalProps} = this.props

    if (type === 'normal') return <NormalButton {...aditionalProps} />

    else if (type === 'action') return <ActionButton {...aditionalProps} />

  }

}

這里發(fā)生的事情是styled-component在styleprop中傳遞樣式，但是如果沒有擴(kuò)展運(yùn)算符，你不會傳遞它，你只是得到一個名為additionalProps.


查看完整回答
反對 回復(fù) 2021-08-20
  • 2 回答
  • 0 關(guān)注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號