function Circle(props) { return(<span className='Circle'>this a circle</span>) } class Lottery extends React.Component{ constructor(props){ super(props); this.state = {}; } render(){ let circles = () => { let circlesrow = []; for (let i;i < this.props.n;i++) { circles.push(<Circle/>) } return (circlesrow); } return( <div> <div> {circles()} </div> </div> ); } } function App() { return ( <div className="App"> <Lottery n={9}/> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } ReactDOM.render( <App />, 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>Quería insertar 9 componentes en los componentes de la Lotería, pero no aparece nada. ¿Puede alguien explicarme por qué una relación como esta no funciona en React? y ¿cuál es la práctica incorrecta utilizada aquí?
i en el ciclo for con un 0 - i = 0circlesrow.push(<Circle />){circles()} function Circle(props) { return(<span className='Circle'>this a circle</span>) } class Lottery extends React.Component{ state = {}; render(){ const circles = () => { const circlesrow = []; for (let i = 0; i < this.props.n; i++) { circlesrow.push(<Circle />) } return circlesrow; } return( <div> <div> {circles()} </div> </div> ); } } function App() { return ( <div className="App"> <Lottery n={9}/> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } ReactDOM.render( <App />, 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> También puede generar la matriz de círculos con Array.from() directamente:
function Circle(props) { return(<span className='Circle'>this a circle</span>) } class Lottery extends React.Component{ state = {}; render(){ const { n } = this.props; return( <div> <div> {Array.from({ length: n }, (_, i) => <Circle key={i} />)} </div> </div> ); } } function App() { return ( <div className="App"> <Lottery n={9}/> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } ReactDOM.render( <App />, 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>necesitabas push a la matriz de circlesrow de círculos (no a la función de circles ). Y llama a la función circles() .
render(){ let circles = () => { let circlesrow = []; for (let i = 0;i < this.props.n;i++) { circlesrow.push(<Circle/>) } return (circlesrow); } return( <div> <div> {circles()} </div> </div> ); }