Question

我是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。

任何和所有帮助将不胜感激。

谢谢，

Answer 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>

使用CSS渲染ReactJS

1 个答案: