如何將React prop傳遞給CSS

我遇到問題 - 我不知道如何使用道具的顏色值更改複選框的顏色。我的想法是通過樣式屬性給它，但我不知道如何切換這個。我正在使用rc-switch，我想根據開關狀態更改他的背景。我有這樣的事情現在如何將React prop傳遞給CSS

<Switch style={{ backgroundColor: mainColor }}/>

但是設置這個顏色兩種狀態，我想是在關閉位置時，該SWICH成爲「defaultColor」。

來源

2017-07-02 Alwox

Switch Component上沒有'style'道具，但有一個'className'道具，您可以使用它來添加自定義類。 – webdeb

Switch Component上沒有樣式道具，但是有一個className道具，您可以使用它來添加自定義類。

如果您使用的青菜：

.mySwitch { 
    &-black { 
    background-color: black; 
    } 

    &-yellow { 
    background-color: yellow; 
    } 
}

然後編程切換類。

<Switch className={`mySwitch-${color}` ... />

可能是一個選項，我認爲。

來源

2017-07-02 18:55:06 webdeb

[''組件將道具傳遞給它呈現的底層']（https://github.com/react-component/switch/blob/master/src/Switch.jsx#L81）。所以'風格'仍然會起作用。問題是關於如何根據交換機的狀態設置不同的樣式。 – trixn

這是真的，但我不會依賴無證的功能，他們可以隨時阻止道具傳播 – webdeb

@webdep但對於'className'道具也是如此。誰保證他們不會停止傳播這個？ – trixn

您必須將回調傳遞給您的<Switch>組件，然後處理該事件。您可以編寫一個包裝原始<Switch>的組件，並在狀態發生變化時切換顏色。它可能看起來像這樣：

import React from 'react'; 
import Switch from 'rc-switch'; 

class ColorChangingSwitch extends React.Component { 
    constructor(props) { 
    super(props); 

    const {checked, defaultChecked} = props; 
    this.state = { 
     checked: checked || defaultChecked || false; 
    } 
    } 

    onChange = (checked) => { 
     // update your state 
     this.setState({ 
     checked: checked, 
    }); 
    this.props.onChange(checked); 
    } 

    render() { 
    const {onChange, className, checked, ...otherProps} = this.props; 
    const colorClassName = this.state.checked ? 'green' : 'red'; 

    return (
     <Switch 
     {...otherProps} 
     onChange={this.onChange} 
     checked={checked} 
     className={`${className} ${colorClassName}`} 
     /> 
    ); 
    } 
} 

export default ColorChangingSwitch;

這只是一個基本的例子。我沒有測試它。您仍然可以將onChange傳遞給該組件並根據需要做出反應。你也可以添加一個道具，根據它的狀態來定義它應該設置哪些顏色/類，而不是硬編碼它們。

來源

2017-07-02 19:33:20 trixn

謝謝，但我忘了告訴我，問題也是我有更多的那些開關：/它看起來更復雜，然後我希望我錯過一些簡單的方法來做到這一點，因爲無論如何這個組件很複雜我不想更多地隱藏這些代碼.. – Alwox

@Alwox如果你像我的例子那樣抽象它，你可以根據需要渲染儘可能多的這些開關，而無需額外的工作。 – trixn

也許你是對的，謝謝 - 我明天再檢查並寫下。 – Alwox

如何將React prop傳遞給CSS

回答

相關問題