如何将逻辑部分从映射函数中提取到其他自创建函数中。将map()逻辑保持为单独的部分

Question

在这个过程中，我必须将逻辑从map()中分离出来，并将其放入一个函数中，然后调用它

<tbody>
      {studentDatas.map((data) => {
        if (
          data.hindi < 35 ||
          data.english < 35 ||
          data.math < 35 ||
          data.science < 35
        ) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Need to study more</td>
              <td>Fail</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science < 250) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Need to work hard</td>
              <td>Pass</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science < 300) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Good</td>
              <td>Pass</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science <= 400) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Excellent</td>
              <td>Pass</td>
            </tr>
          );
        }
      })}
    </tbody>

导出studentDatas ={ id: 1，名称："Student1"，印地语: 10，英语: 10，数学: 20，科学: 25，}，{ id: 2，名称："Student2"，印地语: 40，英语: 80，数学: 0，}，{ id: 3，名称："Student3"，印地语: 70，英语: 80，数学: 80，科学: 90，}，{ id: 4，名称："Student4"，印地语: 20，英语: 45，数学: 50，科学: 70，}，{ id: 5，名称："Student5"，印地语: 40，英语: 50，数学: 70，科学: 90，}，{ id: 6，名称："Student6"，印地语: 28，英语: 70，数学: 80，科学: 10，}，{ id: 7，名称:Student7，印地语: 16，英语: 50，数学: 50，科学: 10，}，{ id: 8，名字："Student8"，英语: 78，英语: 50，数学: 50，科学: 50，}，{ id: 9，名称："Student9"，印地语: 100，英语: 100，数学: 100，科学: 100，}；

Answer 1

尝尝这个

   const getTotalMarks = (data) => {
    return data.hindi + data.english + data.math + data.science;
  }

在地图循环中

<tbody>
    {studentDatas.map((data) => {
      const isFail = data.hindi < 35 || data.english < 35 || data.math < 35 || data.science < 35;
      const total = !isFail && getTotalMarks(data);
      return (
        <tr key={data.id}>
          <td>{data.id}</td>
          <td>{data.name}</td>
          <td>{data.hindi}</td>
          <td>{data.english}</td>
          <td>{data.math}</td>
          <td>{data.science}</td>
          {
            isFail ?
              <>
                <td>Need to study more</td>
                <td>Fail</td>
              </>
              : <>
                {
                  total < 250 ? <td>Need to study more</td>
                    : total < 300 ? <td>Good</td> : <td>Excellent</td>
                }
                <td>Fail</td>
              </>
          }
        </tr>
      );
    })}
  </tbody>