如何将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

回答

相关问题