javascript - React hooks 使用 标签中的样式，但没有绘制样式

Question

我是使用 React hooks 的初学者，所以这次我尝试创建一个简单的示例，但没有渲染任何东西就得到了结果。如果我修改“const style”中的宽度、高度的值，它就会正确绘制。你能给我关于这方面的建议吗？

import Link from 'next/link';
import React from 'react';
import ProfileImage from '../components/ProfileImage';
export default function index() {
    return (
        <>
            <h1>Index</h1>
            <button className="btn btn-primary">Button</button>
            <div>
                <ProfileImage />
                <ProfileImage size={100} />
                <ProfileImage url={'https://placeimg.com/400/400/animals'} />
                <ProfileImage size={500} />
                <ProfileImage url={'https://placeimg.com/400/400/woman'} />
            </div>
        </>);
};

import React, { useState } from 'react';

export default function ProfileImage(props) {
    console.log(props);

    const [width, setWidth] = useState(props.size || 300);
    const [height, setHeight] = useState(props.size || 300);
    const [url, setUrl] = useState(props.url || 'https://placeimg.com/300/300/man');

    const style = {
        display: 'inline-block',
        width: { width },
        height: { height },
        backgroundImage: `url(${url})`,
        backgroundSize: 'cover',
        borderRadius: '50%',
    };

    return (
        <>
            <span style={style} >
                {width}-{height}

            </span>
        </>
    );
}

Answer 1

尝试在 ProfileImage 函数中初始化您的 style 对象。

const style = {
        display: 'inline-block',
        width: width,
        height: height,
        backgroundImage: `url(${url})`,
        backgroundSize: 'cover',
        borderRadius: '50%',
    };