Question

我想动态地动态更改按钮的背景颜色。

如果这是我的radium js样式文件：

按钮-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

您可以根据styles创建props。

优势：您不需要具有基本上分配样式的抓取算法。

按钮-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 }

Answer 2

不知道这是否是正确的方法，但这对我有用。

基数中的默认属性仍然存在，而只有匹配的属性   dynamicStyle prop对象中的prop名称受到影响。所以在这   示例颜色和fontSize没有受到影响，并保持与   返回设置，只有backgroundColor现在为绿色..

<强>更新

根据Janaka Stevens的建议，我将设置设为不可变。但是我在fetchBtnStyle方法中这样做了，而不是每个Janaka Stevens的想法（即颜色属性）中的组件中的硬编码，因为我理论上我不知道用户可能希望改变什么属性;用户可能想要更改颜色，字体大小或背景颜色。

按钮-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 3

样式需要是不可变的，因此您需要在渲染中定义它，如此。

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>)
  }    
}

React Radium - 如何动态更改属性值

3 个答案: