class 背景组件属性不可见

Question

我有一个 class 组件 Tile 这是它的代码，它在一个单独的 JSX 文件中：

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>
        );
    }
}

这是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;

正在渲染 Tile 但它是不可见的，为什么？

Answer 1

查看您的代码后需要注意的几件事

导入图像，因为它不存在于 public 文件夹中以提供服务。
Manifest 文件包含一些 .png 相关内容，需要根据此 Q 删除控制台中的错误 - Read more here
不要从不在同一文件夹层次结构中的组件传递文件路径 - 为什么？很明显，路径被更改并且资源无法加载是基本的...

将部分代码修改为：

App.tsx:

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;

tile.jsx

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>
        );
    }
}

class 背景组件属性不可见

class component with background property invisible

javascript

css

reactjs

create-react-app

App.tsx:

tile.jsx

class 背景组件 属性 不可见

class component with background property invisible

javascript

css

reactjs

create-react-app

App.tsx:

tile.jsx

class 背景组件属性不可见