Использование массива опций в разных компонентах реагирует

Question

Я новичок в реакции. Я думаю, что это очень простой вопрос, но я застрял здесь, типа

Я создал компонент, который выглядит как ->

import React from 'react';

class CreateNumberOfQuestion extends React.Component {
  render() {
    let options = [];
    for (let i = 0; i <= this.props.noc - 1; i++) {
      return "<option key=" + i + ">" + i + "</option" >
        options.push(option);
    }
    return options;
  }
}

export default CreateNumberOfQuestion;

Итак, я использую это в компоненте diff, например,

<select
  className="numberDropdown selectpicker btn btn-labeled btn-start selectId quesSDrop margin-left-10"
  onChange={(e) => { props.onChange(e, "count", props.data.id) }}
>
  <option disabled selected value>None</option>
  {props.noc && <CreateNumberOfQuestion noc={props.noc}/>}
</select>

Итак, я немного сбит с толку. Как мне использовать это, как если бы он не рендерил этот элемент, поэтому, Здесь я получаю одно число, поэтому в соответствии с этим я создаю количество элементов, поэтому, Есть ли что-то, что я делаю неправильно?

Answer 1

Вопросы:

1 - Вы возвращаете массив строк, а не массив элементов JSX.

2 - Вы используете return for for loop, это нарушит цикл.

Нажмите JSX в array и, наконец, верните этот массив, напишите так:

let options = [];
for (let i = 0; i <= this.props.noc - 1; i++) {
   options.push(<option key={i}>i</option>)
}

Answer 2

Пик Sneak в Реактивная документация может решить вашу проблему :-). В этом случае ваш компонент должен возвращать агрегирование карты "noc's".

Answer 3

<select className="numberDropdown selectpicker btn btn-labeled btn-start selectId quesSDrop margin-left-10" onChange={(e) => { props.onChange(e, "count", props.data.id) }}>
    <option disabled selected value>None</option>
    {props.noc && props.noc.map((noc, count) => (<option noc={noc} key={count}> {count} </option>))} 
</select>