Question

使用npm-inline-css模块时，我试图在某个状态下存储样式时更改某些页面元素颜色。我在这里设置状态：

setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;

    if(data) {
        headerStyles.backgroundColor = data.first_colour;
        headerStyles.color = data.theme;
    }
    this.setState({
        branding: data,
        headerStyles: headerStyles
    });
   },

然后我尝试将样式应用于组件：

  render: function (){
    return (
        <div className="our-schools-app">
          <InlineCss stylesheet="
            & .button {
                color: {{this.state.color}};
            }
            " />
            <RouteHandler />  
        </div>
    );
}

但是他们输出如下。如何设置内联样式？或者更好的方法我可以做到这一点？

<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color:     {{this.state.color
}

}
; 
}
</style>

Answer 1

来自React Docs：

在React中，内联样式未指定为字符串。相反，它们使用一个对象来指定，该对象的键是样式名称的camelCased版本，其值是样式的值，通常是一个字符串。

您似乎最有可能尝试为在RouteHandler中呈现的组件中存在的按钮设置样式。

如果是这样的话，那么最有意义的是创建一个包装器来包装其他组件并接受您尝试设置的样式。

例如：

var PageWrapper = React.createClass({
  setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;
    if(data) {
      headerStyles.backgroundColor = data.first_colour;
      headerStyles.color = data.theme;
    }
    this.setState({
      branding: data,
      headerStyles: headerStyles
    });
  },
  render: function () {
    var buttonStyle = {
      color: this.state.color
    }
    return (
        <RouteHandler buttonStyle={buttonStyle} />
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <RouteHandler />
        </div>
    );
  }
});

var Signup = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click below to signup now! </p>
        <button style={this.props.buttonStyle}Click Me!</button>
      </div>
    );
  }
});

var Contact = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click the button below to contact us </p>
        <button style={this.props.buttonStyle}Email Us!</button>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="page" handler={PageWrapper}>
      <Route path="signup" handler={Signup} />
      <Route path="contact" handler={Contact} />
    </Route>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

编辑：根据您的请求，作为展示嵌套路由如何工作的示例，我添加了一个注册和联系人组件。如果查看routes变量，您可以看到我如何在PageWrapper下嵌套这些组件。

现在，嵌套路由/#/page/signup和/#/page/contact都可以访问添加到PageWrapper <RouteHandler />的道具。希望这有帮助！

反应内联样式，从状态应用样式

1 个答案: