Javascript 如何在react with Combing components中进行条件渲染

我正试图像在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>

我想要一个像这样的结构

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

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

GMAT
GRE

---

目前它在dom中显示[object][object]，我想要一个如上所述的结构，任何帮助都将不胜感激。谢谢你不需要像string这样的concat组件，你可以直接使用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>

//每一项
{score_array.map（（ScoreArray，idx）=>{
//如果没有子对象，则直接渲染
如果（！ScoreArray.score\u childs）{
返回
;
}否则{
//如果它有子对象，则逐个渲染所有子对象
返回ScoreArray.score\u child.map（（\u scorechild，id）=>(
));
}
})}

下面是一种较短的方法，它还添加了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>

{score_array.map（（ScoreArray，idx）=>(
{ScoreArray.score_name}
{！ScoreArray.score\u childs(
)：ScoreArray.score\u child.map（（\u scorechild，id）=>(
))}
))}

您不需要压缩字符串等组件，只需使用贴图直接渲染数组，如下所示：

<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>

//每一项
{score_array.map（（ScoreArray，idx）=>{
//如果没有子对象，则直接渲染
如果（！ScoreArray.score\u childs）{
返回
;
}否则{
//如果它有子对象，则逐个渲染所有子对象
返回ScoreArray.score\u child.map（（\u scorechild，id）=>(
));
}
})}

下面是一种较短的方法，它还添加了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>

{score_array.map（（ScoreArray，idx）=>(
{ScoreArray.score_name}
{！ScoreArray.score\u childs(
)：ScoreArray.score\u child.map（（\u scorechild，id）=>(
))}
))}

如果。。。JSX中的Else语句

• 制作一个单独的方法，并根据条件返回输入控件，并在reder方法中使用

---

如果。。。JSX中的Else语句

• 制作一个单独的方法，并根据条件返回输入控件，并在reder方法中使用

---

你能创建一个stackblits工作演示吗？请检查官方文档是的，但是如何加入它们。试想一下：当你执行

\u re+=…

时，你试图得到

未定义的
和
对象的总和，这完全没有意义，并且正确地返回了
“[对象]”
字符串。每个
map
回调调用的结果都必须是单个对象。是的，这就是我要问的“如何取回元素，你能创建一个堆栈吗？”请检查官方文档是的，但如何加入它们。只要想一想：当你执行
\u re+=…
时，你正在试图得到
未定义的
和
对象
完全没有意义，它正确地返回您的
“[Object]”
字符串。每个
map
回调调用的结果都必须是单个对象。是的，这就是我要问的如何取回元素