Javascript 使用循环在react中创建元素
根据下一个工作代码:Javascript 使用循环在react中创建元素,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,根据下一个工作代码: var myfields = new Array('id', 'firstName', 'lastName') const usersd = users; ReactDOM.render( <BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiCol
var myfields = new Array('id', 'firstName', 'lastName')
const usersd = users;
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
<TableHeaderColumn dataField={myfields[1]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[1]}</TableHeaderColumn>
<TableHeaderColumn dataField={myfields[2]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[2]}</TableHeaderColumn>
</BootstrapTable>,
document.getElementById('usersModTable')
);
var myfields=new数组('id','firstName','lastName')
const usersd=用户;
ReactDOM.render(
{myfields[0]}
{myfields[1]}
{myfields[2]}
,
document.getElementById('usersModTable')
);
我想在使用索引的react命令上使用循环。所以我可以使用这样的循环:
var myfields = new Array('id', 'firstName', 'lastName')
const usersd = users;
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
for(var i = 1;i<myfields.length;i++) {
<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>
}
</BootstrapTable>, document.getElementById('usersModTable')
);
var myfields=new数组('id','firstName','lastName')
const usersd=用户;
ReactDOM.render(
{myfields[0]}
对于(var i=1;i第一件事是,您忘记使用{}
,如果您在html
元素中使用任何js
代码,您需要使用{}
您以错误的方式使用循环
,for
循环将不会返回
任何内容,它仅用于迭代数组
。为此,它将返回每个元素的TableHeaderColumn
。如下所示:
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
{
myfields.map((el, i) => <TableHeaderColumn
key={i}
dataField={el}
dataSort={ true }
width='15'
dataAlign='left'
headerAlign='left'>
{el}
</TableHeaderColumn>
}
</BootstrapTable>, document.getElementById('usersModTable'));
Mayank Shukla提出的代码是一种获得你想要的东西的很好的方法(我也会用同样的方法)。但是如果你想要的是使用循环,那么这种方法或多或少应该是这样的:
var myfields = new Array('id', 'firstName', 'lastName')
const usersd = users;
let components = [];
for(var i = 1;i<myfields.length;i++) {
components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
//for(var i = 1;i<myfields.length;i++) {
// <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>;
//}
{components}
</BootstrapTable>, document.getElementById('usersModTable')
);
var myfields=new数组('id','firstName','lastName')
const usersd=用户;
让组件=[];
对于(var i=1;i,在使用react-JSX时,有几件事需要特别注意
ReactDOM.render(
// JSX starts here
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
for(var i = 1;i<myfields.length;i++) {
<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>
}
{
// You can write javascript code here. However you need to ensure that this will return a react/html component.
someCondition ?
<span>positive</span> :
<span>negative</span>
}
{
// Now might will notice that the for loop that you have used above, doesnt return a valid JSX. To overcome that you need to use the *map* to iterate and return the jsx.
myfields.map(function() {
return <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>
})
}
</BootstrapTable>
// JSX ends here
, document.getElementById('usersModTable')
);
ReactDOM.render(
//JSX从这里开始
{myfields[0]}
对于(var i=1;i您给我的所有想法都非常有趣且非常有用。考虑到BootstrapTable的性质,我必须:
var myfields = new Array('id', 'firstName', 'lastName')
const usersd = users;
let components = [<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>];
for(var i = 1; i<myfields.length; i++) {
components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
{components}
</BootstrapTable>,
document.getElementById('usersModTable')
);
var myfields=new数组('id','firstName','lastName')
const usersd=用户;
let components=[{myfields[0]}];
对于(var i=1;i不应使用代码“返回”map函数的结果?如return array.map
…不,map
将return
一个array
(它是map
的属性,它返回map
主体返回的所有元素的array
),即数组
将在jsx
内部呈现,不需要返回,是否不工作?@FacundoLaRocca检查更新的答案,如何使用映射
内部jsx
。
var myfields = new Array('id', 'firstName', 'lastName')
const usersd = users;
let components = [<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>];
for(var i = 1; i<myfields.length; i++) {
components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}
ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true} multiColumnSearch={ true } >
{components}
</BootstrapTable>,
document.getElementById('usersModTable')
);