Question

我正在React中编写一些文档，并尝试在render函数中编写JavaScript时遇到语法错误。我不确定这是解决方法的安全性问题还是实际上是解析器问题：

export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        `
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: 'example@group.calendar.google.com' }]
        }
        `
      </div>
    </div>
 }

我已经尝试过使用反勾号和不使用反勾号，但是仍然出现相同的语法错误：

Module build failed: Syntax Error: Unexpected token, expected }

在api_key之后引用冒号。有没有办法做到这一点，还是我最好采用其他方法。

Answer 1

您只需要将其包装在方括号中即可：

test_df.loc[250].at['B'] = whatever

Answer 2

多行代码应该用括号括起来，并且使用非html标记，因此您需要使用大括号来解析它们：

export default class Docs extends Component {
  render = () => ( {/* 1 */}
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
       { {/* 2 */}
        `
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: 'example@group.calendar.google.com' }]
        }
        `
       }
      </div>
    </div>
   )
 }

{/ * 1 * /}

除了使用括号之外，您还可以使用花括号并使用return语句，例如：

  render = () => {
    return ( <div> {/* optional parentheses */}
     Optional, since it is in same line as return line
    </div>)
  }

或者，例如：

  render = () => {
    return (  {/* required parentheses */}
      <div>
       Required, since it is in different line from return line
    </div>
   )
  }

它的意思是像上一个示例中的<div>一样开始html标记。

{/ * 2 * /}

在前面的示例中将使用花括号，因为所有内容都包装在模板文字或字符串内。请注意，如果您在模板文字中使用${some_var}之类的变量，那么它将导致其值保持原样。如果需要，可以像$\{some_var}

这样的大括号

Answer 3

backquote (`)运算符不是文本或字符串，它是一个运算符，类似于JavaScript函数。在JavaScript中使用时，{}函数必须在JSX内部。所以你应该这样写：

export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        {`
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: 'example@group.calendar.google.com' }]
        }
        `}
      </div>
    </div>
 }

语法错误将JavaScript渲染为React中的文本

4 个答案: