javascript - 通过波斯菊:browserify在 meteor 中使用npm软件包

我正在尝试按照here指示加载Radium(这是用于内联css的JavaScript库)。

在app.browserify.js中:Radium = require("radium");。

在package.json中:"radium": "0.13.4"
但是，当我尝试在应用程序的js中使用Radium时，内联css无法正常工作。 Chrome开发者工具指示Radium = module.exports(ComposedComponent).。

考虑到我以相同的方式加载的ReactPIXI，我假设这应该是一个对象，并且工作正常，而dev工具说ReactPIXI = Object {factories: Object}。

这是我的代码:

AppBody = React.createClass({
  mixins: [ReactMeteorData, Navigation, State, Radium.StyleResolverMixin,
  Radium.BrowserStateMixin],

render: function() {
  var self = this;
  var styles = {
    base: {
      color: this.state.fontColor,
      background: 'red',
    states: [
      {hover: {background: 'blue', color: 'red'}},
      {focus: {background: 'pink', outline: 'none', color: 'yellow'}}
    ]

    //also tried
    //':hover': {background: 'blue', color: 'red'},
    //':focus': {background: 'pink', outline: 'none', color: 'yellow'}
  },
  primary: {
    background: 'green'
  },
  warning: {
    background: 'purple'
  }
};


var items = this.state.items.map(function(item, i) {
  return (
      <div>
        <div style= {[styles.base, styles['warning']]} key={item}>
      // also tried <div style = {this.buildStyles(styles)} key={item}>
          {item}
        </div>
        <button style = {[styles.base, styles['warning']]} onClick={update} >Remove</button>
      </div>
  );
}.bind(this));
return (
       {items}
     )

最佳答案

按照Radium文档中的说明，通过用Radium包装React.createComponent解决了该问题。现在不再使用mixins，代码看起来像这样，并且可以按预期工作。

AppBody = Radium(React.createClass({
  mixins: [ReactMeteorData, Navigation, State],

render: function() {
  var self = this;
  var styles = {
    base: {
      color: this.state.fontColor,
      background: 'red',
    ':hover': {background: 'blue', color: 'red'},
    ':focus': {background: 'pink', outline: 'none', color: 'yellow'}
  },
  primary: {
    background: 'green'
  },
  warning: {
    background: 'purple'
  }
};


var items = this.state.items.map(function(item, i) {
  return (
  <div>
    <div style= {[styles.base, styles['warning']]} key={item}>
      {item}
    </div>
    <button style = {[styles.base, styles['warning']]} onClick={update} >Remove</button>
  </div>
);
}.bind(this));
  return (
        {items}
      )
)}));