reactjs - 动态创建内容反应
问题描述
在我的 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 (in promise) TypeError: B.setState is not a function
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 语法..
例如:假设我有一个带有数据的人员对象,请看这是一个示例数据,您应该通过 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>
);
}
推荐阅读
- git - Git:我们可以在 GIT 存储库中有一个文件夹,它不关心文件历史,只维护该文件夹中的最新内容
- c++ - 调用另一个模拟函数时更改模拟函数的返回值
- flutter - CollectionReference 到 DocumentReference
- c++ - 在 C++ 中将 IPv6 转换为 IPv4 格式?
- python-3.x - 使用 NetworkX 查找图中每个节点的根
- python - 无法使用 pd.concat 合并两个数据帧
- if-statement - 如果他们无法从 if 和 else if 中得到答案,我该如何返回?C++
- php - 如何从 curl php 调用 Salesforce 元数据 rest api
- mysql - 如何修改 MySQL 上的用户权限?
- oracle - Oracle SQL 开发人员数据建模器 - 复合键