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

Question

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

在 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 解决了这个问题。文档。代码现在看起来像这样，并且按预期工作，而不是使用混合宏。

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