0

我正在尝试通过一个 Freecodecamp 项目。该项目是一个降价预览器，您可以在其中在文本区域中输入代码并将其呈现在网页上。除了两个之外，我所有的测试都通过了。它应该在加载时预览文本并且确实如此，但是它会重新渲染，我不确定为什么。有人可以看看并告诉我我做错了什么。我将有一个指向我的 CodePen 的链接。我有两个未通过相同测试的解决方案。一个带有 react-hooks，一个带有类组件。我正在为 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);

CodePenLink

4

1 回答 1

2

你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**.
`;
于 2021-05-13T09:45:47.743 回答