通过cosmos在Meteor中使用npm包:browserify

Question

我正在尝试按照此处的说明加载Radium(这是一个内联css的javascript库).

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

在package.json:"radium": "0.13.4"

但是,当我尝试在应用程序中的js中使用Radium时,内联css不起作用.Chrome开发工具表明了这一点Radium = module.exports(ComposedComponent)..

我假设这应该是一个对象,考虑到我以相同方式加载的ReactPIXI,工作正常,开发工具说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}
     )

Answer 1

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

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