Question

我在一个单独的文件中创建js代码（无论为什么，我只需要了解原理），它只包含一个文字，例如：

export default `
<div>
</div>
`

并将其导入组件，如下所示： import * as content from ./filename.js之后，我可以如下所述，例如：document.write(content)，与此没有关系

但是我完全不清楚在这种结构中如何存储状态。

在我导入此代码的组件中，有一个名为body

的道具

是否可以进行以下构造工作？？

export default `
<div>
${this.props.body}
</div>
`

对不起，如果我写得不太准确。准备快速回答所有问题

Answer 1

如果我发现问题正确，那么您不是在询问反应，而是在询问ES6模板字符串。据我了解，当您编写文字字符串$ {variable}时，它具有当前范围的上下文并在导出之前转换为值。因此，您只能在模板文件中声明这些变量或在导入端使用模板引擎。

作为变体，您可以创建代理功能

//module.js
export default function(context) {
    return `test ${context.teststring} test`
}

// main.js with teststring in scope
import withContext from "./module";
document.write(withContext(this));

Answer 2

模板文字使用${...}：

export default `
<div>
${this.props.body}
</div>
`

React：将状态存储到模板文字

2 个答案: