Question

我想在特定逻辑之后显示图像，例如if（x == 1）{showImage}。我的问题是，在加载图像之前，它不会显示Web内容。图像应显示出来，如“弹出”。

直到现在我的代码：

class TestScreen extends Component {

componentDidMount() {

function images() {
        var img = document.createElement("img");
        img.src = require("./design/icons/veh_symbol.svg");
        document.getElementById('imageDiv').appendChild(img).className = "logoEV";
    }

还有我的“逻辑”：

function testFunc() {
        for (var i = 0; i <= 5; i++) {
            sleep(1000)
            if (i == 5) {
                images();
            }
        }
    }

sleep（）只是测试图像延迟显示的一种解决方法。

我的渲染方法：

render() {

    return (

        <div className="TestScreen">
            <div id="imageDiv"></div>
        </div>

    );

}

Answer 1

您似乎还不太了解反应如何工作。

使用React，您可以忘记document.createElement和appendChild，React在其渲染功能中为您完成了任务。

要实现目标，您应该在组件中设置一个状态，其中包含将来指向图像的链接。然后设置一个超时（不使用睡眠），该超时将更改状态值中的图像。

使用setState会告诉React在屏幕上重新渲染您的组件，这时将显示此图像。

工作示例：

class TestScreen extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			myImage: ''
		}

		setTimeout(() => { this.setState({ myImage: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg' })}, 3000)
	}

	render() {
		const { myImage } = this.state

		return (
			<div className="TestScreen">
				{myImage ? <img id="imageDiv" src={myImage} /> : <p>No image :(</p>}
				
			</div>
		);
	}
}

ReactDOM.render(<TestScreen/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
<div id='root'/>

render函数将检查图像是否已设置为状态，如果存在，则将在image标签中显示该图像，否则，将显示包含消息的段落。这称为条件渲染。

用逻辑方法显示图像

1 个答案: