<分区>
我想编写一个简单的程序，其中使用 for 循环将打印 0 到 10 之间的数字。我正在尝试使用 for 循环打印 0 到 10 之间的数字并将 Prop 传递给子组件。这是我的代码:
import React, { Component } from 'react';
class App extends Component {
render() {
return(
<div>
<p>
{
for(var i=0;i<11;i++)
{
// var data=i;
<Print value={i}/>
}
}
</p>
</div>
);
}
}
const Print=(props)=>{
return(
<div>
{props.value}
</div>
);
}
export default App;
最佳答案
您可以将 JSX 推送到一个数组并进行渲染。
class App extends React.Component {
render() {
const result = [];
for (var i = 0; i < 11; i++) {
result.push(<Print value={i} key={i} />);
}
return <div>{result}</div>;
}
}
const Print = props => {
return <div>{props.value}</div>;
};
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>关于javascript - 如何在 React 的 JSX 中编写 for 循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54823141/
相关文章：
javascript - 坚持 eslint 错误，即分别地，应该避免循环以支持数组迭代
javascript - react "Unhandled Rejection (TypeError): this.state.features.map is not a function"
javascript - React Native onPress 事件延迟
JavaScript 在正确的出现处映射具有多个匹配项的正则表达式
javascript - React 16 的 Portal API 是否打算取代 Context API？