Javascript React：将状态存储到模板文本

我在一个单独的文件中创建js代码，不管为什么，我只需要理解其原理，它只包含一个文本，例如：

export default `
<div>
</div>
`

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

模板文字使用${…}：

---

若我认为问题是对的，那个么您询问的不是react，而是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));

---

这将有助于澄清这一点。导出是否需要像您的问题中那样是字符串，还是可以导出函数？这个问题被标记为React，但是React无法处理这样的基于字符串的模板。我需要重写整个页面，所以我使用了这个方法。请告诉我，如果我尝试将所有这些导出代码包装到一个函数中，document.write是否有效？你能告诉我如何正确地编写这样的结构吗？React实际上不是为通过document.write使用而设计的。您是真的在尝试使用React，还是放弃React而支持这种基于字符串的方法？让我简单地告诉您我所面临的问题。如果URL中有查询，我需要重新绘制整个页面，完全替换html。所以我用这种史前的方法，在我看来这是最好的解决办法。如果我直接在组件内部编写代码，一切都很好，但它占用了太多的空间，因此我决定将其放在单独的文件中。通常，您会使用react router之类的工具来处理该问题，因此react本身将负责根据页面的URL选择要呈现的新组件集。document.write几乎从未在现代JS代码中使用过。我在编写问题时犯了一个错误，我道歉。在我的代码中，这是正确的。我刚刚得到一个错误：无法读取未定义的属性“props”

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

//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));