我可以分别设置不同的无序列表样式吗？

Question

我正在使用ReactJS并在创建li元素时（在一个无序列表下），我将其中一半作为问题，另一半作为答案。当我打印它们时，我希望答案更多地显示在右边，而他们的项目符号显示在文本的右边，就像两个人正在交谈一样。我该如何实现？

renderPast = () => {
var return_value=[];
var flag = false;
for(var i = 0; i < this.props.question_number; i++){
  if(dummy){
    return_value.push(<li id="answers">{this.props.answers[i-1]}</li>)
  }
  return_value.push(<li id="questions">{this.props.questions[i]["text"]}</li>);
}
flag = true;
return return_value;

};

Answer 1

首先将id属性更改为className。 id仅用于一个元素，这将以相同的id呈现每个问题或答案。

Answer 2

只是一个建议，但您可能想更多地利用react的模板。它使事情更容易阅读和管理。另外，您只应在一个元素上使用唯一的ID。具有相同ID的多个元素会影响可访问性，并且脚本可能依赖于获取单个元素。此外，从语义上讲，如果将每个项目合并为问答对，则您的列表会更好。