Closed ilyar closed 6 years ago
https://jsfiddle.net/awinogradov/5a4yrkvj/1/
<div id="root">
<a class="Foo">
<span class="Foo-Bar">baz</span>
</a>
<a class="Foo Foo_project_mod">
<span class="Foo-Quz">quz</span>
<span class="Foo-Bar">baz</span>
</a>
</div>
@awinogradov Спасибо за ответ, кажется что-то не обновилось в песочнице, вижу там:
const { Bem, decl, declMod } = BemReactCore
const MyBlock = (
decl({
block: 'MyBlock',
content: 'Hello'
}),
declMod({ mod: true }, {
block: 'MyBlock',
content(props) {
return [
'Modified ',
this.__base(...arguments)
]
}
}))
.applyDecls()
const Root = () =>
<Bem block="Wrapper">
<MyBlock/>
<MyBlock mod/>
</Bem>
ReactDOM.render(<Root/>, document.getElementById('root'))
<div id="root">
<div class="Wrapper">
<div class="MyBlock">Hello</div>
<div class="MyBlock MyBlock_mod">Modified Hello</div>
</div>
</div>
Да это определенно показывает доопределение, но остается не понятно, как сделать тоже что в примере на xjst
, а именно добавить элемент в структуру блока.
Продублирую сюда
const { Bem, decl, declMod } = BemReactCore
const Foo = (
decl({
block: 'Foo',
tag: 'a'
}),
declMod({ project: '*' }, {
block: 'Foo',
content() {
return [
<Bem elem="Quz" tag="span">quz</Bem>,
this.__base(...arguments)
]
}
})
).applyDecls()
const FooBar = (
decl({
block: 'Foo',
elem: 'Bar',
tag: 'span'
})
).applyDecls()
const Root = () => ([
<Foo>
<FooBar>baz</FooBar>
</Foo>,
<Foo project="mod">
<FooBar>baz</FooBar>
</Foo>
])
ReactDOM.render(<Root/>, document.getElementById('root'))
@awinogradov отлично, спасибо, остается не понятно, как это в реальном проекте может быть, как это на два файла может быть разделено (реализация на уровне библиотеки и проектного доопределения)? И непонятно почему переменная MyBlock
не используется явно это магия реакта?
Какая переменная еще?) Посмотри в код внимательно) Разделение по файлам точно такое же как и всегда было.
*И непонятно почему переменная Foo
, FooBar
и Root
не используется явно это магия реакта (JSX
в них преобразуется)?
Разделение по файлам точно такое же как и всегда было.
Это все таки не понятно.
Посмотри еще раз на код)
// lib/blocks/Foo/Foo.js
import { decl } from 'bem-react-core'
export default decl({
block: 'Foo',
tag: 'a'
})
// lib/blocks/Foo/Bar/Foo-Bar.js
import { decl } from 'bem-react-core'
export default decl({
block: 'Foo',
elem: 'Bar',
tag: 'span'
})
// project/blocks/Foo/_project/Foo_project.js
import { decl } from 'bem-react-core'
export default declMod({ project: '*' }, {
block: 'Foo',
content() {
return [
<Bem elem="Quz" tag="span">quz</Bem>,
this.__base(...arguments)
]
}
})
В
bem-react-core
возможно такое переопределение https://goo.gl/XWUM6WБудет очень полезен пример этого же на реакте с
bem-react-core
.