问题描述
我正在尝试通过 Freecodecamp 项目。该项目是一个降价预览器,您可以在其中在 textarea 中输入代码并在网页上呈现它。除了两个,我所有的测试都通过了。它应该在加载时预览文本并且确实如此,但它会重新渲染,我不确定为什么。有人可以看看并告诉我我做错了什么。我将有一个指向我的 CodePen 的链接。我有两个未通过相同测试的解决方案。一种带有反应钩子,一种带有类组件。我正在为 html 解析器使用标记。谢谢!
我几乎确信它在组件中与 textarea 有关系,因为这是失败的测试之一,但我可以发现它有任何问题。
这是文本编辑器组件:
const Editor = ({ text,setText }) => {
return (
<>
<textarea id='editor' value={ text } onChange={ (e) => setText(e.target.value) } />
</>
);
};
这是占位符为一串html的状态:
const [ text,setText ] = React.useState(placeholder);
解决方法
您的 placeholder
里面有 html
,而不是 markdown
。您可以尝试使用这样的东西作为您的 placeholder
,它应该可以工作
const placeholder = `
# Sample Markdown Header Level
## Sample Header Level 2
### Link
Here's a link to [Codepen](https://codepen.io).
### Code Block
1. Open the file.
2. Find the following code block on line 21:
<html>
<head>
<title>Test</title>
</head>
3. Update the title to match the name of your website.
### Inline Code
I think you should use an \`<addr>\` element here instead.
### List
- First item
- Second item
### Blockquote
> Dorothy followed her through many of the beautiful rooms in her castle.
### Image
![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png "Markdown Logo")
### Bold Text
I just love **bold text**.
`;