Question

我需要在react中创建一个有序列表，我在render（）

中进行跟踪

  render() {
      <div key ={category.index}>
         question.map(questionlist =>
         <li key={questionlist.key}>{questionlist.description}</li>)}
      </div>

Answer 1

使用ordered list获取编号

render() {
  <ol>
     { question.map(questionlist =>
       <li key={questionlist.key}>{questionlist.description}</li>)}}
  </ol>
}

Answer 2

如果要在JSX中使用JavaScript，则需要使用花括号{}。这是一个演示：http://codepen.io/PiotrBerebecki/pen/RGjLyd

根据您的问题，我假设您的数组具有以下格式：

const questionList = [
  {description: 'How to render list in React?', key: 0},
  {description: 'Do you like JS?', key: 1},
  {description: 'Do you know CSS?', key: 2}
];

完整代码：

class App extends React.Component {

  render() {
    const questionList = [
      {description: 'How to render list in React?', key: 0},
      {description: 'Do you like JS?', key: 1},
      {description: 'Do you know CSS?', key: 2}
    ];

    return (
      <ol>
        {questionList.map(question => {
          return (
            <li key={question.key}>{question.description}</li>
          );
        })}
      </ol>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

如何在反应中创建有序编号列表

2 个答案: