Сохранить значение javascript для меньшего количества переменных + reactjs

Я пытаюсь заполнить меньшее значение переменной переменной js со страницы html в приложении на основе reactjs.

index.html

<script>window.baseColor = '#000000'//Color value will be dynamic</script>

style.less

@baseColor: window.baseColor

Less обычно компилируется в css перед загрузкой в ​​браузер. Итак, вы ищете переменную css или ищете встроенные стили реакции?

user93 11.04.2018 13:46

Как вы думаете, встроенные стили реакции - правильный путь? Также нет возможности обновить меньшее количество переменных изнутри reactjs?

Jaison James 11.04.2018 13:50

Less, scss и т. д. Являются препроцессорами, что означает, что они будут скомпилированы в css, прежде чем браузер сможет это понять.

user93 11.04.2018 14:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
80
1

Ответы 1

Я не думаю, что это возможно, но вы можете сделать это, используя встроенный стиль, и если вы собираетесь использовать его в нескольких компонентах, вы можете использовать новый контекстный API

const BaseColorContext = React.createContext('#000000')
class ColorProvider extends React.Component {
  state = {baseColor: '#fff'}
  render() {
    return (
      <BaseColorContext.Provider value = {this.state.baseColor}>
        {this.props.children}
      </BaseColorContext.Provider>
    )
  }
}
class App extends React.Component {
  render() {
    return (
      <ColorProvider>
        <BaseColorContext.Consumer>
          {val => <div style = {{backgroundColor:val}}>content here</div>}
        </BaseColorContext.Consumer>
      </ColorProvider>
    )
  }
}

Другие вопросы по теме