Реагировать: сохранять состояние в литералах шаблона

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