使用 CSS 渲染 ReactJS答案

【问题标题】：Rendering ReactJS with CSS使用 CSS 渲染 ReactJS
【发布时间】：2016-07-08 18:38:34
【问题描述】：

我是 React 的新手，由于某种原因无法正确渲染一段 CSS。

我有一个反应类，应用程序应该显示一个卡片，上面有一个进度跟踪器。

var App = React.createClass({
render: function () {
    var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
        return (
            <div className="row" key={1}>
                <div className="col-sm-12">
                    <Card>
                        <h1>Title</h1>
                        <div className="clearfix">
                            <ol class="progtrckr" data-progtrckr-steps="5">
                                <li class="progtrckr-done">Order Processing</li>
                                <li class="progtrckr-done">Pre-Production</li>
                                <li class="progtrckr-done">In Production</li>
                                <li class="progtrckr-done">Shipped</li>
                                <li class="progtrckr-todo">Delivered</li>
                            </ol>
                            <div className="pull-right">
                                <p>Total: {iOSTotal}</p>
                            </div>
                        </div>
                     </Card>

卡定义为：

 module.exports = React.createClass({
    render: function() {
        return (
            <div className="card">
                {this.props.children}
            </div>

        )
    }
});

而 proctrckr CSS 在 css/build 文件中为：

    ol.progtrckr {
  display: table;
  list-style-type: none;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%; }

ol.progtrckr li {
  display: table-cell;
  text-align: center;
  line-height: 3em; }

ol.progtrckr li.progtrckr-done {
  color: black;
  border-bottom: 4px solid yellowgreen; }

ol.progtrckr li.progtrckr-todo {
  color: silver;
  border-bottom: 4px solid silver; }

ol.progtrckr li:after {
  content: "\00a0\00a0"; }

ol.progtrckr li:before {
  position: relative;
  bottom: -2.5em;
  float: left;
  left: 50%;
  line-height: 1em; }

ol.progtrckr li.progtrckr-done:before {
  content: "\2713";
  color: white;
  background-color: yellowgreen;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  border: none;
  border-radius: 1.2em; }

ol.progtrckr li.progtrckr-todo:before {
  content: "\039F";
  color: silver;
  background-color: white;
  font-size: 1.5em;
  bottom: -1.6em; }

但是，由于某种原因，它只是显示为一个常规的有序列表，没有我放入的任何 CSS。

我们将不胜感激。

谢谢，

【问题讨论】：

如果你打开控制台，你应该会看到一个错误提示你不能使用class

标签： html css reactjs

【解决方案1】：

将class 替换为className。常见的 jsx 陷阱。 Docs.

由于 JSX 是 JavaScript，因此 class 和 for 等标识符是不鼓励作为 XML 属性名称。相反，React DOM 组件期望 DOM 属性名称分别像 className 和 htmlFor。

<ol className="progtrckr" data-progtrckr-steps="5">
  <li className="progtrckr-done">Order Processing</li>
  <li className="progtrckr-done">Pre-Production</li>
  <li className="progtrckr-done">In Production</li>
  <li className="progtrckr-done">Shipped</li>
  <li className="progtrckr-todo">Delivered</li>
</ol>

【讨论】：