在reactjs中的返回内映射答案

【问题标题】：Map inside a return in reactjs在reactjs中的返回内映射
【发布时间】：2021-06-25 06:30:51
【问题描述】：

我正在学习 React 做一个测试应用程序，但我在知道返回部分的 .map 内的正确答案时遇到问题，这是我的代码：

const Question = (props) => {
/*This part randomize the order of answers*/
let render_order = questions[props.level][props.option][1]
const correct = render_order[0]
render_order = render_order.sort(function() { return Math.random() - 0.5 })

return (
    <div class='question'>
        <div class='real_question'>
            {questions[props.level][props.option][0]}
        </div>
        {render_order.map(a => {
            return <div class='option'> {a} {correct}</div>
        })}
    </div>
)}

“正确”始终是正确答案；但是在 .map 内呈现“正确”的那一刻，这成为问题的另一个答案。

【问题讨论】：

可以分享render_order的样本数据，方便分析
@Thinker 当然：render_order 就像 [2, 5, 4, 3, 7]，其中 2 是正确答案，之后变成 [4, 5, 2, 7, 3]，准备渲染（当控制台记录'disorder'列表和正确答案时，这工作正常）
这就是你想要的？ codesandbox.io/s/react-playground-forked-w14jo?file=/index.js
几乎！我真正想要的是为正确答案添加不同的样式/功能；例如，正确答案为绿色背景，否则为红色背景
在correct div 中添加一个类并插入样式

标签： javascript reactjs jsx

【解决方案1】：

你可以这样做：

const Question = (props) => {
  /*This part randomize the order of answers*/
  let render_order = [2, 5, 4, 3, 7];
  const correct = render_order[0];
  render_order = render_order.sort(function () {
    return Math.random() - 0.5;
  });

  return (
    <div class="question">
      Answer: {correct}{" "}
      {render_order.map((a, index) => {
        return (
          <div className={`option ${a === correct ? "correct" : ""}`}>
            `Question {index + 1}: ${a}`
          </div>
        );
      })}
    </div>
  );
};


class TodoApp extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div>
        <Question />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

在这里演示：https://jsfiddle.net/qfsjczda/1/

编码愉快！！！

【讨论】：

【解决方案2】：

我认为您的{correct} 被不必要地重复了。

<div class='question'>
        <div class='real_question'>
            {questions[props.level][props.option][0]}
        </div>
        {render_order.map(a => {
            return <div class='option'> {a}</div>
        })}
        {correct}
 </div>

这是你想要做的吗？

【讨论】：

不完全是；我需要地图内的正确信息，例如，我想要正确选项的 div 的背景颜色为绿色

【解决方案3】：

尝试为列表中的每个项目添加 key 属性

【讨论】：

【解决方案4】：

根据您的问题，我了解到 render_order 是问题的选项列表。

render_order.map 会将列表中的每个元素映射到将被渲染的 jsx 元素。

{render_order.map(a => {
            return <div className='option'> {a} {correct}</div>
})}

在上面的每个选项的 sn-p 中，您可能还附加了正确的选项

一个可能的更新是只呈现选项而不是正确的答案-

{render_order.map(a => {
            return <div className='option'> {a}</div>
})}

编辑 - 选项匹配正确答案

时更改颜色

{render_order.map(a => {
            return <div className={`option ${a===correct && 'correct'}`} > {a}</div>;
})}

在你的 CSS 中添加这个类

.正确的{

背景色：绿色；

}

【讨论】：

几乎！但我需要.map 中正确答案的信息；例如，如果我点击正确的答案，我想将背景颜色更改为绿色
我已编辑我的答案以添加您的更改