Динамически создавать контент React

Question

В моем проекте React мне нужно динамически добавлять строки.

Я использую код, чтобы сделать это следующим образом

    let Para=GetPara();
    React.createElement("p", { style: { color: "black" } }, Para[0]),
    React.createElement("p", { style: { color: "black" } }, Para[1])

В приведенном выше коде Para заполняется ajax-функцией, которая возвращает массив, который я хотел бы сделать динамически, как

function GetPara() {
    return (
    for (let index = 0; index < Para.length; index++) {
        React.createElement("p", {style: {color: "black"}}, Para[i])
    }
}

Но в приведенной выше функции я не могу вернуть элемент реагирования. Я тоже пробовал

function GetPara() {
    let teststr = "";
    for (let index = 0; index < Para.length; index++) {
        teststr += React.createElement("p", , Para[i]);
    }
    return (teststr);
}

Если я использую вышеупомянутый метод, значение возвращается в виде строки и выглядит как

"<p>test1</p><p>test2</p>"

Основываясь на ответе, я изменил код ниже, но я все еще не получаю значения

и получить следующую ошибку Uncaught (в обещании) TypeError: B.setState не является функцией

  const Questions = (props) => {

    let Qvalues = [];
 GetData().then((response => {
            if (response) {
                QuestionValues = response;
                if (QuestionValues && QuestionValues.length > 0) {
                    console.log(QuestionValues.length);
                    for (let index = 0; index < QuestionValues.length; index++) {
                        let Qoptions = QuestionValues[index]["Options"].split(',').map(function (val)
                         {             return { key: val, text: val };
                        }
                        );
                        Qvalues.push(<div className={styles.FormRow}>
                            <p>Qoptions[0] </p>
                            <p>Qoptions[1] </p>
                        </div>);

                    };


                };
            };
            this.setState({QuestionValues:Qvalues});   console.log(Qvalues);
})).then(res => {
    return (

        <div >
            { this.state.QuestionValues&& Qvalues}
        </div>
    )
});

return (
    <div >
        {Qvalues}
    </div>
)
 public render(): React.ReactElement<IEProps> {

        return
                <div>
                    <div className={styles.container}>
                    <Header></Header>
                    <Questions></Questions>
                    <Footer></Footer>
                    </div>
              </div>


    }

Наконец, мне удалось решить проблему с помощью ценных ответов от Zayco и gopigorantala.

Мое решение заключается в следующем

  public componentDidMount() {
    let Qvalues = [];
    GetData().then((response => {
        if (response) {
            QuestionValues = response;
            if (QuestionValues && QuestionValues.length > 0) {
                console.log(QuestionValues.length);
                for (let index = 0; index < QuestionValues.length; index++) {
                    let Qoptions = QuestionValues[index]["Options"].split(',').map(function (val) { return { key: val, text: val }; });
                    Qvalues.push(<div className={styles.FormRow}>
                        <p>Qoptions[0] </p>
                        <p>Qoptions[1] </p>
                    </div>);

                };
            };
            this.setState({ QuestionValues: Qvalues });
        };
    }))
}
 public render(): React.ReactElement < IEProps > {
    const Questions = (props) => {

        return (
            <div>
                {this.state.QuestionValues}
            </div>)
    }
        return
        <div>
                    < div className = { styles.container } >
    <Header></Header>
    <Questions></Questions>
    <Footer></Footer>
                    </div >
              </div >
    }

Answer 1

При условии, что ваш вызов API возвращает массив строк, это должно работать.

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Questions extends Component {
  state = {
    questionValues: null,
  };

  componentDidMount() {
    GetData().then(response => {
      if (response) {
        if (response.length > 0) {
          this.setState({
            questionValues: response,
          });
        }
      }
    });
  }

  renderQuestions = () => this.state.questionValues.map(q => <Text key={q}>{q}</Text>);

  render() {
    if (!this.state.questionValues) return <Text>Here you can return a custom loading component</Text>;

    return <View>{this.renderQuestions()}</View>;
  }
}
export default Questions;

Answer 2

Вы можете сделать это в методе render()

Я использую синтаксис JSX ниже..

Например: допустим, у меня есть объект person с данными, пожалуйста, посмотрите, что это пример данных, и вы должны получать эти данные через остальные API или из базы данных.

state = {
        persons: [
            {id: '01', name: 'one', age: 28},
            {id: '02', name: 'two', age: 26}
        ]
    };

// следующие лица отображаются динамически на основе количества объектов состояния.

render() {
        let persons = (
            <div>
                {this.state.persons.map((person, index) => {
                    return (<div className="Person">
                        <p>I'm a {person.name} and I am {person.age} years old</p>
                    </div>)
                })
                }
            </div>
        );

        return (
            <div className="App" >
                {persons}
            </div>

        );
    }