Сохранить значение 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
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>
    )
  }
}

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