Question

使用案例

我们从外部数据库（mySQL）中获取颜色十六进制代码和大小等样式，并通过axios提取这些样式。

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

我们知道我们可以在React中执行此操作，但我们希望使用基于类和基于组件的CSS使其更具可伸缩性。

以下是我们公理的一个例子：

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

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

Answer 1

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

Hello.defaultProps = {
color: 'blue'
}

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

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

在React.js中使用外部数据库中的样式

1 个答案: