React Radium - Как динамически менять значения свойств

Question

Я хочу динамически менять цвет фона кнопки динамически.

Если это файл моего радий стили расслоения плотного:

пуговицы styles.js

export const styles = { 
    base: { 
    backgroundColor: 'red', 
    } 
}; 

button.js

const myStyles = require('./styles/button-styles.js'); 

@Radium 
class MyButton extends Component { 

render() { 

    {/* 
    How do I tell the button to override the default value 
    for background color of red, to the props value if it exists, 
    (and in this scenario it does and is the color green)? 
    */} 
    return (<Button style={ ??? }>Click Me</Button>) 
    }  
} 

MyButton.defaultProps = { 
    btnBg: 'green' 
} 

MyButton.propTypes = { 
    btnBg: PropTYpes.string 
} 

(Побочное примечание полномочия, которые есть, нет метки реакционного радиуса.)

Answer 1

Не знаю, подходит ли это для этого, но это сработало для меня.

Свойства по умолчанию в базе остались, в то время как были затронуты только те, у кого есть соответствующее имя prop в propSpace. Так что в этом например, цвет и размер шрифта не были затронуты и остались с настройками возврата , только с BackgroundColor теперь зеленый ..

---

UPDATE:

рекомендация

Per Janaka Стивенс, я сделал настройки неизменными. Но я сделал это в методе fetchBtnStyle, а не в жестком кодировании в компоненте по идее Янаки Стивенса (т. Е. Свойство цвета), потому что я теоретизирую, что не знаю, какое свойство пользователь может пожелать изменить; пользователь может захотеть изменить цвет, размер шрифта или фоновый цвет.

пуговицах styles.js

const styleValues = { 
    base: { 
    fontSize: '1.0em', 
    color: '#fff', 
    backgroundColor: 'red', 
    } 
}; 

module.exports = { 
    fetchBtnStyle(values) { 
    const settings = {}; 
    // making the value immutable here <------------- 
    Object.assign(settings, styleValues.base) 
    if (values !== undefined) { 
     Object.assign(settings, values); 
    } 
    return settings; 
    } 
}; 

button.js

import btnStyles = require('./styles/button-styles.js'); 

@Radium 
class MyButton extends Component { 

render() {  
    return (
    <Button style={ btnStyles.fetchBtnStyle(this.props.dynamicStyle) }> 
     Click Me 
    </Button>) 
    }  
} 

MyButton.defaultProps = { 
    dynamicStyle: { 
    backgroundColor: 'green' 
    } 
} 

MyButton.propTypes = { 
    dynamicStyle: PropTypes.object 
} 

Answer 2

Стиль должен быть неизменен, так что вы хотите, чтобы определить его в визуализации, как так.

class MyButton extends Component { 
 

 
render() { 
 
    let btnSty = MyStyles.base; 
 
    if (this.props.dynamicSty) 
 
    btnSty.color = this.props.dynamicSty.color; 
 
    else 
 
    btnSty.color = MyStyles.base.color; 
 
    return (
 
    <Button style={btnSty}> 
 
     Click Me 
 
    </Button>) 
 
    }  
 
}

Answer 3

Вы можете создать свой styles в зависимости от вашего props.

Advantage: Вам не нужно иметь алгоритм выборки, который просто в основном присваивает ваши стили.

button-styles.JS

export default props => ({ 
 
    backgroundColor: props.btnBg 
 
    // if you need a default value you could use 
 
    // props.btnBg || 'green' 
 
}) 
 

 
// You could even use ES6 object destruction 
 
export default ({btnBg}) => ({ 
 
    backgroundColor: btnBg 
 
})

button.js

const myStyles = require('./styles/button-styles.js'); 
 

 
@Radium 
 
class MyButton extends Component { 
 
    render() { 
 
    return <Button style={ myStyles(this.props) }>Click Me</Button> 
 
    }  
 
} 
 

 
MyButton.defaultProps = { 
 
    btnBg: 'green' 
 
} 
 
MyButton.propTypes = { 
 
    btnBg: PropTypes.string 
 
}