Question

我们正在使用Laravel Mix编译反应组件并将它们单独提供给需要它们的相应页面 - 它不是SPA。

我是React的新手，请原谅我的无知。我试图了解当前的设置，并了解它是否是在同一页面中拥有多个组件的正确方法。

因此，下面的样板已经复制并粘贴到每个组件中，只更改了选择器，例如：

'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
    applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)

ReactDOM.render(
    <Provider store={newstore}>
        <App />
    </Provider>, document.querySelector('.component-foo')
)

某些组件在创建商店的方式上也略有不同，例如： redux devtools并不总是存在。

所以，来自Vue.js，这对我来说没有多大意义 - 在Vue.js中，您使用单个文件导入与框架相关的所有内容，然后加载您需要的每个组件只需一行代码。但是这个React设置似乎正好相反：为页面中的每个组件加载一个单独的React和Redux实例，就好像我在Vue.js中有多个root / app组件一样。

假设React被捆绑并多次启动并且这是正确的做事方式是正确的吗？

Answer 1

你几乎可以肯定这样做错了。是的，很可能你多次捆绑和启动React，但这不是正确的做事方式。您似乎正在尝试使用Vue范例来执行此操作，但是使用从React SPA复制的代码，这就是您构建此怪物的原因。

我建议您在继续之前检查基本的反应+ laravel教程吗？简单的谷歌搜索显示：https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443，我确定还有很多其他人。

由于您刚刚做出反应，现在就避免使用redux，只是熟悉对多个组件的反应。只有这样你才需要添加redux状态管理。

单独编译和提供React组件

1 个答案: