在 React.js 中使用来自外部数据库的样式答案

【问题标题】：Using Styles from an External Database in React.js在 React.js 中使用来自外部数据库的样式
【发布时间】：2018-09-16 21:55:54
【问题描述】：

用例：

我们从外部数据库 (mySQL) 中提取颜色十六进制代码和尺寸等样式，并通过 axios 提取这些样式。

将这些变量从 Javascript 文件传递到 React 中的 CSS 样式的最简单方法是什么？

我们知道我们可以在 React 中做到这一点，但我们希望使用基于类和基于组件的 CSS 使其更具可扩展性。

下面是我们的 axios get 示例：

axios.get(`/landingPage/${ customerId }`)
  .then((response) => {
    console.log(response);
    this.setState({
      databaseStuff: mapToProps(response.data),
    });
  })
  .catch((error) => {
    console.log(error);
  });
 }

这是将数据库中的所有属性放入 this.props 中，以便我们可以在 jsx 中访问它们。我们现在只需要将它们放入样式中。

【问题讨论】：

标签： javascript css reactjs axios jsx

【解决方案1】：

我认为你应该首先使用https://reactjs.org/docs/react-component.html#defaultprops 为每个组件设置一个基本的默认样式，例如：

Hello.defaultProps = {
color: 'blue'
}

然后您可以使用 className 应用更改。

<UserComponent className={props.databaseStuff.userClass}/>

【讨论】：

您能否详细说明userClass 在您的示例中做了什么？我想我错过了什么。
如果您从数据库中提取单个值，我不想错过您可以使用 props.databaseStuff 。在我的示例中，我希望您正在提取一个包含不同值的 json 字符串，这就是我将 userClass 作为属性的原因。
这是非常有用的反馈，但我认为我们的用例是独一无二的。我们没有来自数据库的类名。我们只有十六进制代码和品牌指南出现在数据库前面，所以我们必须根据 json 对象自己应用它们。