Мы также можем полагаться на пользовательские свойства CSS (переменные) , чтобы манипулировать псевдоэлементом. Мы можем прочитать в спецификации , что:
Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с обычным наследованием и каскадными правилами, может быть обусловлено @media и другими условными правилами, может использоваться в атрибуте стиля HTML, может быть прочитан или задан с использованием CSSOM и т. д.
. Учитывая это, идея состоит в том, чтобы определить пользовательское свойство внутри элемента и псевдоэлемент просто наследует его; таким образом, мы можем легко изменить его:
1) Использование встроенного стиля:
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }
2) Использование CSS и классы
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; } .blue { --color:blue; } .black { --color:black; }
3) Использование javascript
document.querySelectorAll('.box')[0].style.setProperty("--color", "blue"); document.querySelectorAll('.box')[1].style.setProperty("--color", "#f0f");
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }
4) Использование jQuery
$('.box').eq(0).css("--color", "blue"); /* the css() function with custom properties works only with a jQuery vesion >= 3.x with older version we can use style attribute to set the value. Simply pay attention if you already have inline style defined! */ $('.box').eq(1).attr("style","--color:#f0f");
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }
Он также может использоваться со сложными значениями:
.box { --c:"content"; --b:linear-gradient(red,blue); --s:20px; --p:0 15px; } .box:before { content: var(--c); background:var(--b); color:#fff; font-size: calc(2 * var(--s) + 5px); padding:var(--p); }
Вы не должны вызывать setState
внутри метода render
, у вас может получиться бесконечный цикл. Вызов myFunc
должен быть где-то еще (в зависимости от вашей бизнес-логики). Когда функция завершается, она обновляет состояние и затем запускает повторную визуализацию, поэтому MyComponent
получит самое последнее значение.
ОБНОВЛЕНИЕ
Я не знаю, какие условия потребуют повторного вызова myFunc, но вы можете сделать:
state = {
myProp: null // or some other value that MyComponent can handle as a null state
}
componentDidMount () {
myFunc((p) => {
if(!_.isEqual(p, this.state.myProp)) // This is needed only if you get null back from the callback and you don't want to perform an unnecesary state update
this.setState({myProp: p})
}
}
render(){
const { myProp } = this.state
// You can also do if (!myProp) return null
return <MyComponent myProp={myProp}/>
}