在使用 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>
)}
</>
)
}
编辑返回...如何将多行字符串作为默认值输入编辑器?
最佳答案
您可以使用模板文字来执行多行语句。
在 AceEditor 的官方文档中提到你可以为 传递一个字符串。值(value) 应该反射(reflect)在编辑器中的属性,因此当您在“”中传递一个字符串时,它不应该换行,所以当您使用模板文字时,即 ${``}
我们可以给出多行句子
因此,它类似于我们传递值以响应属性的方式
attribute-name = {"这里我们指定应该是什么值"}
在我们的例子中,它应该是一个可以多行的字符串
所以属性名 = { ${``}
}
例子:
value={`${`
//firstline
//secondline
...
//n line`}`}
引用 :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
关于javascript - 在 react-ace Ace Editor 中将多行字符串设置为 defaultValue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67952673/