React、Redux、React-Router - 卡在安装 material-ui

Posted 2023-02-22

【中文标题】React、Redux、React-Router - 卡在安装 material-ui

【英文标题】：React, Redux, React-Router - Stuck at installing material-ui

【发布时间】：2016-09-20 09:13:27

【问题描述】：

教程：

但是，由于我使用的是 redux 和 react 路由器，所以我不能真正将 MuiThemeProvider 放在链的顶部。包含此库的最佳方式是什么？

那是我的 ReactDOM.render 函数：

ReactDOM.render(
  <Provider store=store>
    <div>
      devTools
      <Router history=history routes=getRoutes(actions.logout)/>
    </div>
  </Provider>,
  document.getElementById('root')
);

这就是路由器：

export default (onLogout) => (
  <Route path="/" name="app" component=App>
    <IndexRoute component=SimpleListComponent/>
    <Route path="register" component=RegisterPage/>
    <Route path="private" component=privateRoute(PrivatePage)/>
    <Route path="login" component=LoginPage/>
    <Route path="logout" onEnter=onLogout/>
  </Route>
);

【参考方案1】：

我就是这样做的。我有一个 index.js，我的 package.json 将它作为要启动的主文件（使用 npm start）。在其中我有（为简洁起见，删除了一些导入等）：

import './stylesheets/fonts.css';
import './stylesheets/main.css';

injectTapEventPlugin();

// custom MuiTheme overriding the getMuiTheme() values
const muiTheme = getMuiTheme(
  palette: 
    textColor: cyan500,
  ,
  appBar: 
    color: grey300,
    textColor: cyan500,
    height: 50
  ,
);

const Index = () => (
  <MuiThemeProvider muiTheme=muiTheme>
    <Root />
  </MuiThemeProvider>
)

render(
  <Index />,
  document.getElementById('app')
);

这取决于我的 container/Root.jsx 文件中的另一个文件 Root：

const store = configureStore();

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store);

let onUpdate = () => window.scrollTo(0, 0); ;

export default class Root extends Component 
  render() 
    return (
      <Provider store=store>
        <div>
          <Router history=history onUpdate=onUpdate>
            <Route path="/" component=App>
              <IndexRoute component=Home/>
              <Route path="home" component=Home/>
              <Redirect path="*" to="/" />
            </Route>
          </Router>
          <DevTools/>
        </div>
      </Provider>
    );
  

接下来是应用程序，它包含我的应用程序的初始布局（在我的容器/App.jsx 文件中）：

export default class App extends Component 
  constructor(props, context) 
    super(props, context);
  

  static propTypes = 
    children: PropTypes.node
  

  render() 
    return (
      <Grid fluid>
        <Row>
          <Col>
            <Header active=this.props.active />
          </Col>
        </Row>
        <Row>
          <Col>
            this.props.children
          </Col>
        </Row>
        <Row>
          <Col>
            <Footer/>
          </Col>
        </Row>
      </Grid>
    );
  


const mapStateToProps = (state, ownProps) => 
  return 
    active: ownProps.history.isActive
  ;
;

export default connect(mapStateToProps)(App)

我正在使用 react flex 网格组件进行布局。

到目前为止，这对我有用。希望它可以帮助你。不要忘记 injectTapEventPlugin() 调用，因为我在 index.js 文件中有它。我还为我的应用导入了 .css 文件。

【讨论】：

同时我解决了它，实际上和你做的非常相似。当我开始这个问题时，我也使用了手写笔，这给出了错误。所以我最终删除了它。

你有一份原始的进口清单吗？我想考虑做类似的事情，但我不确定如何将我的进口与你的进口对齐。谢谢。

【参考方案2】：

ReactDOM.render(
  <MuiThemeProvider muiTheme=getMuiTheme()>
   <Provider store=store>
    <div>
      devTools
      <Router history=history routes=getRoutes(actions.logout)/>
    </div>
   </Provider>
  </MuiThemeProvider>
,
  document.getElementById('root')
);    

【讨论】：

是的，我之前确实试过这个。事实证明，手写笔并不能真正与它相处。

还有一个手写笔接口，原来用的少-,-。所以我就用那个。谢谢