Question

没有显示ReactJS有序列表编号。

我想要实现的目标是：

我想生成一个带答案的问题列表。这些问题从我的应用程序检索的JSON呈现到DOM中。

以下是我认为相关的代码：

主要切入点：

var React = require('react');
var ReactDom = require('react-dom');
require('./index.css');
var App = require('./components/App')

ReactDom.render(
    <App />,
    document.getElementById('react-app')
);

App.js

var React = require('react');
var QuestionList = require('./QuestionList');

class App extends React.Component {
    render(){
        return (
            <div className="container">
                <QuestionList />
            </div>
        )
    }
}

module.exports = App

QuestionList.js

var React = require('react');
var Schema = require('./Schema');
var Category = require('./Category')

class QuestionList extends React.Component {
    render(){
        return (
            <div>
                <h1 key={Schema.questionSetId}>{Schema.questionSetTitle}</h1>
                {Schema.category.map(function(obj, i) {
                    return <Category key={i} obj={obj}/>;
                })}
            </div>
        )
    }
}

module.exports = QuestionList;

Category.js

var React = require('react');
var Question = require('./Question');

class Category extends React.Component {
    render(){
        return (
            <div>
                <h3>{this.props.obj.name}</h3>
                <ol type="1">
                    {this.props.obj.questions.map(function(obj, i) {
                        return <li key={i}><Question obj={obj} /></li>;
                    })}
                </ol>
            </div>
        )
    }

    constructor(props) {
        super(props);
    }
}

module.exports = Category;

Question.js

var React = require('react');
var QuestionScore = require('./QuestionScore');

class Question extends React.Component {
    render(){
        return (
            <div>
                <p>{this.props.obj.questionTitle}</p>
                <QuestionScore obj={this.props.obj.questionScore} />
            </div>
        )
    }

    constructor(props) {
        super(props);
    }
}

module.exports = Question;

QuestionScore.js

var React = require('react');

class QuestionScore extends React.Component {
    render(){
        return (
            <div>
                Score (type : {this.props.obj.type}) = {this.props.obj.score}
            </div>
        )
    }

    constructor(props) {
        super(props);
    }
}

module.exports = QuestionScore;

我还没有包含Schema.js文件（那就是我的JSON所在的位置），因为我不认为它是相关的，因为我可以将数据传递到链条上。

This is what browser displays

This the source code that gets generated by react when I inspect it in Chrome

我看到某处可能存在缩进问题，所以我安装并设置了eslint，但一切都保持不变。我对ReactJS很新（过去两周一直在学习它），所以我预感到我犯了一个愚蠢的错误。我非常感谢能够指出的人：）

其他说明：我在Visual Code中编码并使用webpack构建。 ReactJS应用程序将显示在DevExpress XAF框架的IFrame中。

编辑1：正如James King所说，问题是CSS。我按照教程构建了这个项目，他们的CSS有这一行：

li {
    list-style-type: none;
}

我从未想过要去看那里，但回想起来似乎很明显。一旦我将其删除，它就会按预期工作。

未显示ReactJS有序列表编号

0 个答案: