javascript - 如何通过组合组件进行条件渲染

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>