4

在使用 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>
        )}
    </>
  )
}

编辑返回...

代码编辑器说明

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

4

1 回答 1

2

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

因此，它类似于我们传递值以响应属性的方式

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

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

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

例子：

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

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

于 2021-07-20T14:41:23.383 回答