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

Question

I create js code in a separate file (no matter why, I just need to understand the principle), which consists of just a literal, for example:

export default `
<div>
</div>
`

and import it into the component as follows: import * as content from ./filename.js after which I can refer to him as follows, for example: document.write(content) and there are no problems with this

But it is not at all clear to me how in such a construction it is possible to store the state.

In the component where I import this code, there is a props called body

Is it possible to make the following construction work: ?

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

Sorry if I didn't write too accurately. Ready to quickly answer all questions

Answer 1

If i see problem right, you ask not about react but ES6 template strings. As i understand, when you write a literal string ${variable} it have context of current scope and translate to value before you export it. So you have only way to declare these variables inside your template file or use template engine at import side.

As variant, you can create proxy function

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

A template literal uses ${...} :

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