在 react-ace Ace 编辑器中将多行字符串设置为 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>
        )}
    </>
  )
}

编辑器returns...

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

Answer 1

您可以使用模板文字来执行多行语句。在 AceEditor 的官方文档中提到你可以为 value 属性传递一个字符串，这应该反映在编辑器中，所以当你在 " " 中传递一个字符串时，它不应该换行，所以，当您使用模板文字时，即${``} 我们可以给出多行句子

所以，这类似于我们传递值以响应属性的方式

attribute-name = {"这里我们指定应该是什么值"}

在我们的例子中，它应该是一个可以在多行中的字符串

所以 属性名称 = {${``}}

示例：

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

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

在 react-ace Ace 编辑器中将多行字符串设置为 defaultValue

Set a multiline string as defaultValue in react-ace Ace Editor

javascript

ace-editor

react-ace