反应高阶函数以插入随机图像在重新渲染时不起作用

Question

我有一个非常简单的 HOC，其代码是

import React from 'react';

const withRandomImage = Comp => props => {
  const x = Math.floor(Math.random() * 26);
  return <Comp {...props} image={x} /> 
}

export default withRandomImage;

它与代码为

的 ImageBar 组件配合使用

import React from 'react';
import styled from 'styled-components';

import withRandomImage from '../../hocs/WithRandomImage';

const Bar = styled.div`
    display: block;
    height: 310px;
    background-image: url(${props => props.image});
    background-size: cover;
    background-position: 0px -400px;
    background-repeat: no-repeat;
`

const formatWrapper = {
    width: "100%",
    height: "310px"
}

class ImageBar extends React.Component {

    getBgImage = () => {
        console.log(window.location.origin);
        return window.location.origin + '/hp/' + this.props.image + '.jpg';
    }

    render() {
        console.log("Image: ",this.getBgImage());
        return (
            <Bar className="ImageBar" image={this.getBgImage()}>
                <div className="container-fluid">
                    <div className="row align-items-center" style={formatWrapper}>
                        {this.props.inner}
                    </div>
                </div>
            </Bar>
        )
    }
}

export default withRandomImage(ImageBar);

这个想法是每次刷新页面时都使用随机图像作为背景图像。图片来自 React 的 public 目录中的 /hp/ 文件夹。

第一次渲染组件时一切正常。但是在这个 ImageBar 中，我有一些组件（在 this.props.inner 中传递），它们附加了事件侦听器。每次触发事件 ID 时，背景图像都会消失。

这是呈现此 ImageBar 的组件示例。

render() {
    return (
        <div>
            <Header />
            <ImageBar inner={this.getSearchBar()} />
        </div>
    )
}

我认为这与组件生命周期有关，但无法确定到底发生了什么。

有什么建议吗？

Answer 1

我认为 math.random() * 26 生成的 url 在您的 hp 文件夹中没有正确的图像。你检查过了吗？

请记住，每次渲染都会生成一个新的随机值和一个新的道具。您可以 "freeze it" 到 "first" 生成的值，方法是将生成的数字移到增强组件之外。

类似于

const withRandomImage = Comp => {
    const x = Math.floor(Math.random() * 26);
    // when rereder occurs, only the code below will be run - so the image is always the same
    return props => <Comp {...props} image={x} />
}

反应高阶函数以插入随机图像在重新渲染时不起作用

React high order funtion to insert random image not working when re-rendering

lifecycle

rendering

reactjs