#javascript #reactjs #inline-styles
Вопрос:
Вот код, не уверен, является ли это проблемой с React или простой опечаткой, но как только этот компонент отображается, весь тег стиля исчезает. Что делает этот код, так это изменяет масштаб преобразования каждые 750 мс на случайный размер от 0 до 0,5, но, как уже говорилось, у него возникают проблемы даже с отображением тега, что странно.
let styles = { transform: `scale(0.5);` } function changeStyle() { var r = -0.1 Math.random() * (0.2 - 0) 0; styles = { transform: `scale(${r});` }; setTimeout(changeStyle, 750); } changeStyle(); export default class Runaway extends Component { componentDidMount() { console.log("Booting up Runaway button v1 by Ashe Muller.") } render() { return ( lt;div style={{styles}}gt; lt;text id="shopItemGrid"gt;RUN AWAYlt;/textgt; lt;/divgt; ) } } Комментарии:
1. пусть стили должны быть состоянием компонента react
2. @victorzadorozhnyy Я пробовал это, но это дало ту же проблему.
3. lt;div style={стили}gt; должно работать
Ответ №1:
То, как код структурирован сейчас, styles никогда не изменится, потому changeStyle() что он никогда не вызывается внутри компонента.
Попробуйте что-нибудь вроде этого:
export default class Runaway extends Component { constructor() { super(); this.state = { transform: 'scale(0.5)' } } handleTransformChange = () =gt; { var r = -0.1 Math.random() * (0.2 - 0) 0; var newTransform = `scale(${r})`; this.setState({ transform: newTransform }); } componentDidMount() { console.log("Booting up Runaway button v1 by Ashe Muller.") this.timer = setInterval( () =gt; this.handleTransformChange(), 750 ); } componentWillUnmount() { clearInterval(this.timer); } render() { let styles = { transform: this.state.transform }; return ( lt;div style={styles}gt; lt;text id="shopItemGrid"gt;RUN AWAYlt;/textgt; lt;/divgt; ); } } Комментарии:
1. Вы могли бы подумать, что это сработает, но по какой-то странной причине это все еще не работает. Тег стиля по-прежнему не отображается в рендере.
2. Это решение сработало, но для будущих ссылок на людей, которые будут смотреть на эту тему в будущем, в div «стили» должны быть
{styles}вместо{{styles}}того, как это уже объект. Кроме того, для того, чтобы цикл продолжался ,setTimeoutего следует изменить наsetIntervalиclearTimeoutнаclearInterval. Спасибо вам за помощь!3. Никаких проблем, @AsheMuller. Я обновил код, чтобы отразить это ^ для будущих пользователей. также.
Ответ №2:
ваши «стили» let уже являются объектом и должны быть переданы как таковые в ваш стиль div:
lt;div style={styles}gt; так что результат был бы :
lt;div style={{ transform: `scale(0.5);` }}gt; В вашем случае вы добавляете уровень объекта, и, наконец, ваш стиль выглядит так:
style={{ styles : { transform: `scale(0.5);` }} что не является допустимым стилем.
Комментарии:
1. К сожалению, даже изменение его на
{styles}все еще не исправило рендеринг. Изначально это было просто{styles}, но я предположил, что проблема заключалась в том, чтобы не ставить двойные скобки, и дал ему другой набор.