How to write for loop in JSX in React?
本问题已经有最佳答案,请猛点这里访问。
我想写一个简单的程序,其中使用for循环它将打印从0到10的数字。我正在尝试使用for循环,它将打印0到10之间的数字,并将道具传递给子组件。 这是我的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import React, { Component } from 'react'; class App extends Component { render() { return( <p> { for(var i=0;i<11;i++) { // var data=i; <Print value={i}/> } } </p> ); } } const Print=(props)=>{ return( {props.value} ); } export default App; |
您可以将JSX推送到数组并进行渲染。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class App extends React.Component { render() { const result = []; for (var i = 0; i < 11; i++) { result.push(<Print value={i} key={i} />); } return {result}; } } const Print = props => { return {props.value}; }; ReactDOM.render(<App />, document.getElementById("root")); |
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"> |