字符串文字在React中无法正常工作

时间:2018-10-06 16:18:57

标签: reactjs

似乎无法使“代码”周围的字符串文字起作用(我需要在markdown中创建内联代码)。我也尝试使用“”和单引号,但是可惜没有骰子。有什么想法吗?

import React, { Component } from 'react';
import './App.css';
import MarkdownExample from "./previewer";


class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: `# h1 Heading 
              ## h2 Heading
              Here´s a link too: (http://dev.nodeca.com)
              Inline ``code``

              Indented code

              // Some comments
              line 1 of code
              line 2 of code
              line 3 of code
              Block code "fences"

An image:

![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Ordered list

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_`

};

2 个答案:

答案 0 :(得分:0)

问题在这里很简单,并且正在发生,因为您的降价促销中有“代码”。

您需要做的就是在反引号之前使用\来使markdown中的反引号转义。

我还在这里为您创建了一个示例:https://stackblitz.com/edit/react-dx2v6t?file=index.js

答案 1 :(得分:0)

这部分

 `# h1 Heading 
  ## h2 Heading
  Here´s a link too: (http://dev.nodeca.com)
  Inline ``code``

  Indented code
  ...

未按预期进行解析。中间的反引号被解析为模板文字定界符。

这被认为是单独的模板文字和tag

  `# h1 Heading 
  ## h2 Heading
  Here´s a link too: (http://dev.nodeca.com)
  Inline `

即它被解析为:

 (`# h1 Heading 
  ## h2 Heading
  Here´s a link too: (http://dev.nodeca.com)
  Inline `)(...)

为了将其解析为单个模板文字,应将反引号转义:

 `# h1 Heading 
  ## h2 Heading
  Here´s a link too: (http://dev.nodeca.com)
  Inline \`\`code\`\`

  Indented code
  ...