问题描述
我目前正在关注一位已将其代码库上传到 here 的 YouTuber。我一直在密切关注他的视频,但由于某种原因,当我在控制台中输入 npm start 时,我成功编译了项目,但浏览器中没有任何显示。我试过多次重启,但无济于事,因为我是 React.js 的新手,我不知道如何调试这个应用程序。我的越野车分支是 here。非常感谢任何想法或建议。
更新: 我已将错误范围缩小到 Button.js 组件,但我不确定为什么注释掉的代码不起作用。
// import React from 'react';
// import { Link } from 'react-router-dom';
// import './Button.css';
// const STYLES = ['btn__primary','btn__outline'];
// const SIZES = ['btn__medium','btn__large'];
// export const Button = ({
// children,// type,// onClick,// buttonStyle,// buttonSize
// }) => {
// const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
// const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
// return (
// <Link to='/' className='btn__mobile'>
// <Button
// className={`btn ${checkButtonStyle} ${checkButtonSize}`}
// onClick={onClick}
// type={type}
// >
// {children}
// </Button>
// </Link>
// );
// };
import React from 'react';
import { Link } from 'react-router-dom';
import './Button.css';
export function Button() {
return (
<Link to='sign-up'>
<button className='btn'>Sign Up</button>
</Link>
);
}
解决方法
您是否在浏览器中使用 localhost:3000? React 在端口 3000 上运行。确认您在浏览器中位于该地址,然后尝试在创建 react-app 的正确目录中再次运行 npm start。
,似乎我试图使用以下代码从其内部调用 Button 组件:
// <Button
// className={`btn ${checkButtonStyle} ${checkButtonSize}`}
// onClick={onClick}
// type={type}
// >
// {children}
// </Button>
Button 组件应该是这样的 HTML 元素:
// <button
// className={`btn ${checkButtonStyle} ${checkButtonSize}`}
// onClick={onClick}
// type={type}
// >
// {children}
// </button>