如何在與組合組件的反應中進行條件渲染

Question

我正在嘗試進行連接，就像我們在 React 組件中的 js 字符串中所做的一樣，並希望像下面那樣交付它們

<Fragment>

              {score_array.map((ScoreArray, idx) => {
                let _re;
                   if(!ScoreArray.score_childs)
                   {

                    _re+=
                      <Colxx key={idx} sm={6}>

                       <Input
                         type="number"
                         pattern="[0-9]*"
                         inputMode="numeric"
                         className="number_type"
                         placeholder={ScoreArray.score_name}
                         name="score_value"
                         value={ScoreArray.score_value}
                         onChange={this.handleScoreArrayValueChange(idx)}
                       />
                     </Colxx>

                   }

                   else{

                    ScoreArray.score_childs.map((_scorechild,id)=>{
                      _re+=
                        <Colxx key={idx} sm={6}>

                         <Input
                           type="number"
                           pattern="[0-9]*"
                           inputMode="numeric"
                           className="number_type"
                           placeholder={_scorechild.score_name}
                           name="score_value"
                           value={ScoreArray.score_value}
                           onChange={this.handleScoreArrayValueChange(idx)}
                         />
                       </Colxx>




                    })

                   }

               return _re;


              })}
            </Fragment>

該數組類似於我試圖迭代的東西

let score_array= [
     {
      "score_name": "GMAT",
        "ps_score_id": 200,
        "score_childs":null
      },
      {
        "score_name": "GRE",
        "ps_score_id": 2,
        "score_childs": [
          {
            "score_name": "GRE READ",
            "ps_score_id": 9
          },
          {
            "score_name": "GRE WRITE",
            "ps_score_id": 10
          },
          {
            "score_name": "GRE SPEAK",
            "ps_score_id": 11
          },
          {
            "score_name": "GRE LISTEN",
            "ps_score_id": 12
          }
        ]
      }
    ]

我想要一個像

<h1>GMAT</h1>
<input  name="GMAT ">

<h1>GRE</h1>
<input  name="GRE READ ">
<input  name="GRE WRITE ">
<input  name="GRE SPEAK ">

目前它在 dom 中顯示 [object] [object]，我想要一個如上所述的結構，任何幫助將不勝感激。謝謝

Answer 1

您不需要連接像字符串這樣的組件，您可以直接使用 map 渲染數組，如下所示：

<Fragment>
    // for each item
    {score_array.map((ScoreArray, idx) => {
      // if it doesn't have children render it directly
      if (!ScoreArray.score_childs) {
        return <Colxx key={idx} sm={6}>
          <Input
            type="number"
            pattern="[0-9]*"
            inputMode="numeric"
            className="number_type"
            placeholder={ScoreArray.score_name}
            name="score_value"
            value={ScoreArray.score_value}
            onChange={this.handleScoreArrayValueChange(idx)}
          />
        </Colxx>;
      } else {
        // if it has children render all of them one by one
        return ScoreArray.score_childs.map((_scorechild, id) => (
          <Colxx key={id} sm={6}>
            <Input
              type="number"
              pattern="[0-9]*"
              inputMode="numeric"
              className="number_type"
              placeholder={_scorechild.score_name}
              name="score_value"
              value={ScoreArray.score_value}
              onChange={this.handleScoreArrayValueChange(idx)}
            />
          </Colxx>
        ));
      }
    })}
</Fragment>

這是一種更短的方法，它也添加了一個 h1 標記並用三元運算符替換了 if 語句：

    <Fragment>
      {score_array.map((ScoreArray, idx) => (
        <Fragment>
          <h1>{ScoreArray.score_name}</h1>
          {!ScoreArray.score_childs ? (
            <Colxx key={idx} sm={6}>
              <Input
                type="number"
                pattern="[0-9]*"
                inputMode="numeric"
                className="number_type"
                placeholder={ScoreArray.score_name}
                name="score_value"
                value={ScoreArray.score_value}
                onChange={this.handleScoreArrayValueChange(idx)}
              />
            </Colxx>
          ) : ScoreArray.score_childs.map((_scorechild, id) => (
            <Colxx key={id} sm={6}>
              <Input
                type="number"
                pattern="[0-9]*"
                inputMode="numeric"
                className="number_type"
                placeholder={_scorechild.score_name}
                name="score_value"
                value={ScoreArray.score_value}
                onChange={this.handleScoreArrayValueChange(idx)}
              />
            </Colxx>
          ))}
        </Fragment>
      ))}
    </Fragment>

Answer 2

如果…… JSX 中的 Else 語句，則您不能使用的第一件事

• 制作一個單獨的方法並根據條件返回輸入控件並在 reder 方法中使用