javascript - 在 react-ace Ace Editor 中将多行字符串设置为 defaultValue

Question

在使用 react-ace (Ace Editor) 库时，我发现自己需要定义 defaultValue属性作为 JSX 格式的代码块(我在 JavaScript 中留下的编辑器模式)，如下所示:

<div style={{height: "100%", width:"100%"}}>
  <AceEditor
      mode="javascript"
      theme="github"
      onChange={this.onChange}
      name="UNIQUE_ID_OF_DIV"
      defaultValue="export default function MyComponent({ children }) {..."
      width="100%"
      height="100%"
      editorProps={{
          $blockScrolling: true
      }}
  />
</div>

声明 defaultValue 时得到这样的东西:

export default function MyComponent({ children }) {
    return (
    <>
      <header>
        <a>
          <Image
            priority
            className={utilStyles.borderCircle}
            height={108}
            width={108}
            alt={name}
          />
        </a>
        <h2 className={utilStyles.headingLg}>
          <a className={utilStyles.colorInherit}>{name}</a>
        </h2>
      </header>
      <main>{children}</main>
        {!home && (
          <div className={styles.backToHome}>
            <a>← Home</a>
          </div>
        )}
    </>
  )
}

编辑返回...

如何将多行字符串作为默认值输入编辑器？

Answer 1

您可以使用模板文字来执行多行语句。
在 AceEditor 的官方文档中提到你可以为 传递一个字符串。值(value) 应该反射(reflect)在编辑器中的属性，因此当您在“”中传递一个字符串时，它不应该换行，所以当您使用模板文字时，即 ${``} 我们可以给出多行句子
因此，它类似于我们传递值以响应属性的方式
attribute-name = {"这里我们指定应该是什么值"}
在我们的例子中，它应该是一个可以多行的字符串
所以属性名 = { ${``} }
例子:

value={`${`
//firstline
//secondline
...
//n line`}`}

引用 :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals