Tengo un mosaico de componente de Tile aquí está su código, está en un archivo JSX separado:
import React from 'react'; export default class Tile extends React.Component { render() { return ( <div style={{ width:"16px", height:"16px", background: `url('${this.props.tiles}') no-repeat ${+this.props.x * -16} ${+this.props.y * -16}` }} className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`} ></div> ); } } Aquí está la app.jsx :
import React from 'react'; import Tile from './components/tile.jsx'; function App() { return ( <div className="App"> <Tile tiles="./assets/Tilemap/tiles_packed.png" x="0" y="0" /> </div> ); } export default App; el Tile se está renderizando pero es invisible, ¿por qué?
Un par de cosas que debe buscar después de mirar su código
Modificar las partes del código como:
import React from 'react'; import Tile from './components/tile.jsx'; import tiles_packed from "./assets/Tilemap/tiles_packed.png" // this get's the image and pass it any where you want function App() { return ( <div className="App"> <Tile tiles= {tiles_packed} x="0" y="0" /> </div> ); } export default App; import React from 'react'; export default class Tile extends React.Component { render() { return ( <div style={{ "minWidth": '16px', // change styles to view image "minHeight": '16px', background: `url(${this.props.tiles}) no-repeat ${+this.props.x * -16} ${+this.props.y * -16}`, }} className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`} ></div> ); } }