Question

我正在尝试使用基于reactjs的应用程序中的html页面的js变量填充较少的变量值。

的index.html

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

style.less

@baseColor: window.baseColor

Answer 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>
    )
  }
}

将javascript值存储到较少的变量+ reactjs

1 个答案: