Javascript 使用<；span>；标记，但没有'；不要画那种样式

我是一个使用React钩子的初学者，所以这次我尝试创建一个简单的示例，但是没有渲染任何东西就得到了结果。如果我在“const style”中修改了width、height的值，它将正确绘制。你能给我一个建议吗

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

从“下一个/链接”导入链接；
从“React”导入React；
从“../components/ProfileImage”导入ProfileImage；
导出默认函数索引（）{
返回(
指数
按钮
);
};

import React，{useState}来自“React”；
导出默认函数配置文件图像（道具）{
控制台日志（道具）；
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');
常量样式={
显示：“内联块”，
宽度：{width}，
高度：{height}，
背景图片：`url（${url}）`，
背景尺寸：'封面'，
边界半径：“50%”，
};
返回(
{width}-{height}
);
}

尝试在

ProfileImage

函数中初始化您的

样式

对象

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

---

你到底想用钩子做什么？您从未调用过

setWidth

或

setHeight

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