Question

我想基于一些计算以编程方式设置容器的宽度和高度。

我正在尝试设置我为componentDidUpdate（）中的元素创建的引用的样式，但没有效果

export default class CanvasOverlay extends React.Component {
    static propTypes = {
        imageURI : PropTypes.string.isRequired,
    };

    constructor(props) {
        super(props);
        this.width = 0;
        this.height = 0;
        this.canvasOverlay = React.createRef();
    }

    componentDidMount() {
        let image = new Image();
        let that = this;
        image.onload = function() {
            that._updateDimension(image.width, image.height);
        };
        image.src = this.props.imageURI;
    }

    _updateDimension(imageWidth, imageHeight) {
        const canvasOverlay = this.canvasOverlay.current;
        //Ideally there should be some calculations to get width and 
         height
        canvasOverlay.style.width = 480;
        canvasOverlay.style.height = 400;
    }

    render() {
        return(
            <div ref={this.canvasOverlay}>
                <Canvas imageURI={this.props.imageURI}/>
            </div>
        );
    }
}

HTML元素canvasOverlay应该已调整大小，但尚未调整

Answer 1

元素的style.width和style.height不接受带有类型编号的值，因此您应将其转换为字符串并添加一个'px'单位。

element.style.width = `${width}px`;

// or

element.style.width = width + 'px';

Answer 2

我在代码中看到两个问题。

componentDidMount

_updateDimension 。 ComponentDidMount在组件的生命周期中仅被调用一次，这意味着它将始终使用初始大小来计算宽度和高度。调整浏览器的大小不会反映正确的宽度，并且您可能会看到溢出。
canvasOverlay.style.width 和 canvasOverlay.style.height 将需要字符串而不是数字。例如“ 400像素”

以下是关于React组件生命周期的很好的解释：https://medium.com/@nancydo7/understanding-react-16-4-component-lifecycle-methods-e376710e5157

这是具有给定代码的有效POC： https://stackblitz.com/edit/react-hosymf?file=CanvasOverlay.js

React：如何以编程方式设置React组件中元素的宽度和高度

2 个答案: