动态创建 Content React
Dynamically create Content React
在我的 React 项目中,我需要动态添加行。
我的代码如下
let Para=GetPara();
React.createElement("p", { style: { color: "black" } }, Para[0]),
React.createElement("p", { style: { color: "black" } }, Para[1])
在上面的代码中,Para 由一个 ajax 函数填充,该函数 return 是一个数组
我想像
那样动态地做
function GetPara() {
return (
for (let index = 0; index < Para.length; index++) {
React.createElement("p", {style: {color: "black"}}, Para[i])
}
}
但是在上面的函数中我似乎无法 return 反应元素。我也试过了
function GetPara() {
let teststr = "";
for (let index = 0; index < Para.length; index++) {
teststr += React.createElement("p", , Para[i]);
}
return (teststr);
}
如果我使用上述方法,值是 returned 是字符串并显示为
"<p>test1</p><p>test2</p>"
根据答案我更改了下面的代码,但我仍然没有得到值
并得到如下错误
未捕获(承诺)类型错误: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 >
}
你可以在react的render()方法中做到这一点..
我在下面使用 JSX 语法..
ex:假设我有一个带有数据的人对象,请看这是一个示例数据,您应该通过 rest 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>
);
}
前提是您的 api 调用 returns 字符串数组,这应该有效。
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;
在我的 React 项目中,我需要动态添加行。
我的代码如下
let Para=GetPara();
React.createElement("p", { style: { color: "black" } }, Para[0]),
React.createElement("p", { style: { color: "black" } }, Para[1])
在上面的代码中,Para 由一个 ajax 函数填充,该函数 return 是一个数组 我想像
那样动态地做function GetPara() {
return (
for (let index = 0; index < Para.length; index++) {
React.createElement("p", {style: {color: "black"}}, Para[i])
}
}
但是在上面的函数中我似乎无法 return 反应元素。我也试过了
function GetPara() {
let teststr = "";
for (let index = 0; index < Para.length; index++) {
teststr += React.createElement("p", , Para[i]);
}
return (teststr);
}
如果我使用上述方法,值是 returned 是字符串并显示为
"<p>test1</p><p>test2</p>"
根据答案我更改了下面的代码,但我仍然没有得到值
并得到如下错误 未捕获(承诺)类型错误: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 >
}
你可以在react的render()方法中做到这一点..
我在下面使用 JSX 语法..
ex:假设我有一个带有数据的人对象,请看这是一个示例数据,您应该通过 rest 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>
);
}
前提是您的 api 调用 returns 字符串数组,这应该有效。
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;