javascript - React/Redux 将 props 传递给主组件

Question

我对 React/Redux 构建中的数据流仍然很困惑。在我的应用程序“中”工作时我相当自在，但我不知道如何将数据从服务器传递到我的应用程序？

我有react-app.php 文件，其中包含article#main-content 元素，它是我的应用程序的基本元素。我想传递一些产品的元素信息。

我该怎么做？

我想提供 article#main-content prop ProductName 但我不知道如何从 React 访问它。

我的猜测是来自 reducer ......但是如何呢？也许我不应该依赖 article#main-content 并传递变量以在 $_GET 参数中使用react？

react-app.php

<link rel="stylesheet" type="text/css" href="/lines-configurator/build/style.css" media="screen"/>
<script async type="text/javascript" src="/lines-configurator/build/bundle.js"></script>

<article id="main-content" productName="My Product">
</article>

应用程序.js:

import React from 'react';
import {render} from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from './reducers/index';

import BoardConfig from './containers/BoardConfigContainer';
import BoardProduct from './containers/BoardProductContainer';

const store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());

render(
    <Provider store={store}>
        <div>
            <BoardConfig />
            <BoardProduct />
        </div>
    </Provider>,
    document.getElementById('main-content')
);

BoardProductContainer.js

import {connect} from 'react-redux';
import BoardProduct from '../components/BoardProductComponent';

export default connect(
    function mapStateToProps(state) {
        return {

        };
    },
    function mapDispatchToProps(dispatch) {
        return {};
    }
)(BoardProduct);

BoardProductComponent.js

import React from 'react';

export default function () {
    return ();
}

BoardProductReducer.js

import * as types from '../constants/constants';
import Immutable from 'immutable';

const initialState = Immutable.Map({});

export default function boardReducer(state = initialState, action) {
    switch (action.type) {
        default:
            return state;
    }
}

Answer 1

您可以从以下位置获取url参数

this.props.location.query

例如:

// http://localhost:3000/?test=1

console.log(this.props.location.query);
/*
{
  test: "1"
}
*/

<小时/>

传递除 $_GET 之外的服务器变量

通常你会调用并执行一个ajax请求并在reducer中返回。

但是由于从一开始你就已经有了一个值，你可以做的就是将 App.js 的代码包装在 start 函数中

export default function start(serverVar) {
    // use serverVar here:
    const store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());

    render(
        <Provider store={store}>
            <div>
                <BoardConfig />
                <BoardProduct />
            </div>
        </Provider>,
        document.getElementById('main-content')
    );
}

更改 webpack 的输出以包括:

library: 'Foo'

在您的 html 文件中添加:

<script type="text/javascript">
  Foo.start('<?php echo $serverVar; ?>');
</script>

或者简单地

忽略上面的所有设置并执行此操作

<script type="text/javascript">
  window.someValue = '<?php echo $serverVar; ?>';
</script>