Динамически отображать набор вопросов (полученных как ответ API), а также текстовое поле и переключатель под каждым вопросом. - PullRequest
Новая
       16

Динамически отображать набор вопросов (полученных как ответ API), а также текстовое поле и переключатель под каждым вопросом.

0 голосов
/ 01 января 2019

В настоящее время работаем над страницей Вопрос / Ответ, используя ReactJS.Я получаю вопросы через вызов API.

Я хотел бы отобразить набор переключателей и текстовое поле, чтобы пользователь мог ответить на каждый из этих вопросов.«Панель», которая выглядит примерно таквопрос 1 ...... "" набор переключателей "" текстовое поле "

" вопрос 2 ...... "" набор переключателей "" текстовое поле "

Однако количество вопросов постоянно меняется, поэтому я не могу предположить статическое количество панелей / строк.

Я пытался использовать функцию карты для создания массива компонентов.Что-то вроде этого.PS: В настоящее время компонент представляет собой просто теги <h1>, мне нужно изменить его на <form></form> для моего варианта использования.

var comdata = data.map((x, i) => {
            return (<h1>{x.data}</h1>)
          })

Как сделать этот массив компонентов?

Есть ли другие решения для этого?

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Вы можете визуализировать переключатель и текст внутри карты, например, как показано ниже: 

var Question = ({ data }) => (
          <h1>{data.title}</h1>
          {
            //map your radio buttons here if you get the options in the data
           data.options.map(option => <input type="radio"/>)
          }  
          <textarea/>
   )

При рендеринге вышеуказанный компонент можно использовать с картой и генерировать несколько вопросов 

{ 
  data.map((x,i) => (
    <Question data={x} />
  ))    
}
0 голосов
/ 01 января 2019

Использование функции карты кажется правильным путем, вы можете разделить на два разных компонента, например: 

// In the future this would be your form for a single question
const QuestionForm = ({ data }) => (
   <h1>{data}</h1>
);

/**
 * Here you would create a component that maps the data and calls 
 * the previous component for each entry, make sure you provide a 
 * unique key to each element of the  array
 */
class Questionary extends React.Component {
    render() {
      const data = this.props;

      const questions = data.map(question => (
          <QuestionForm 
              key={question.id} 
              data={question.data} 
          />
      );

      return (
          <div className="questionary">
              <h1>Questionary</h1>
              {questions}
          </div>
      );
    }
);

В этом случае я использовал функциональные компоненты, но если вы используете обычные компоненты классаПросто убедитесь, что вы возвращаете свой массив компонентов в функции рендеринга.

...