p
В Свелте)))
<script>
export let seconds;
setInterval(() => (seconds += 1), 1000);
</script>
<div>
Seconds: {seconds}
</div>
Size: a a a
2020 June 05
В
persona x grata
Блин, ну разные ж концепции совсем
CM
Блин, ну разные ж концепции совсем
Да🌚
ДФ
persona x grata
Покажи как
import React, { useState, useEffect } from "react";
export const TicTac = () => {
const [tic, setTic] = useState(0);
useEffect(() => {
setInterval(() => {
setTic((s) => s + 1);
}, 1000);
}, []);
return <p>{tic}</p>;
};p
import React, { useState, useEffect } from "react";
export const TicTac = () => {
const [tic, setTic] = useState(0);
useEffect(() => {
setInterval(() => {
setTic((s) => s + 1);
}, 1000);
}, []);
return <p>{tic}</p>;
};Так получше)
В
persona x grata
А есть способ лаконичнее, чтобы вывести строку: Seconds: 1...
?
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Секунды: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
?
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Секунды: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
let Seconds = ({value = 0}) => (
<div>Seconds: {value}</div>
);
let tick = (value = 0) => {
ReactDOM.render(<Seconds value={value} />, document.getElementById('root'));
tick.timeout = setTimeout(() => tick(value + 1), 1000);
};
tick();🌚
S
let Seconds = ({value = 0}) => (
<div>Seconds: {value}</div>
);
let tick = (value = 0) => {
ReactDOM.render(<Seconds value={value} />, document.getElementById('root'));
tick.timeout = setTimeout(() => tick(value + 1), 1000);
};
tick();🌚
p
let Seconds = ({value = 0}) => (
<div>Seconds: {value}</div>
);
let tick = (value = 0) => {
ReactDOM.render(<Seconds value={value} />, document.getElementById('root'));
tick.timeout = setTimeout(() => tick(value + 1), 1000);
};
tick();🌚
Инкапсулировала render внутрь стрелки?
F
persona x grata
Можно верстать лендосы на Свелте
https://dev.to/karkranikhil/build-responsive-website-using-svelte-in-30-minutes-l9
https://dev.to/karkranikhil/build-responsive-website-using-svelte-in-30-minutes-l9
света запаяла?
DE
Вы с ума свелте
p
Foma
света запаяла?
цепляет лаконичностью. как смотришь на использование светки как шаблонизатора под верстку?
p
только прикрутить scss в rollup
F
зачем тот сасс....
F
компоненты плюс css переменные...
А
+
p
Foma
зачем тот сасс....
типа объявить цсс-переменные в хеш-таблице и импортить?
F
это ч то б ту херню писать аля el el__title el__title-red
F
кого импортить?
F
:root{
—my-color:red
}
и она доступна везде
—my-color:red
}
и она доступна везде