javascript - 如何从 Laravel Blade 传递 React 全球商店提供者的默认状态？

Question

我已经为我的应用程序设置了一个全局存储，使用这样的 React Context API：

class App extends Component {
   render() {
      return (
        <SettingsProvider>
            <Items />
        </SettingsProvider>
      );
   }
}

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

mu 提供者看起来像这样：

const defaultState = {test:'test'}

function SettingsProvider({children}) {
    const [state, dispatch] = React.useReducer(settingsReducer, defaultState);

    return (
        <SettingsContext.Provider value={{ state, dispatch }}>
            {children}
        </SettingsContext.Provider>
    )
}

一切都按预期工作。但现在我想将 defaultState 从 Laravel 传递给 SettingsProvider，而不是在我的 javascript 中定义它，使用如下所示：

<div id="app" defaultstate="{{$state}}"></div>

但我还没有弄清楚，如何从我的 SettingsProvider 访问这些值......我该如何实现呢？

标签： javascriptreactjslaravellaravel-bladereact-context

Answer 1

React 不知道 HTML 属性。您需要将defaultStateBlade 模板中的属性作为道具传递给App组件，然后将道具传递给SettingsProvider组件。

应用程序.jsx

class App extends Component {
   render() {
      return (
        <SettingsProvider defaultState={this.props.defaultState}>
            <Items />
        </SettingsProvider>
      );
   }
}

if (document.getElementById('app')) {
    // find element by id
    const element = document.getElementById('app')

    // Get element's defaultState attribute
    const defaultState = element.getAttribute('defaultState')

    // render element
    render(<App defaultState={defaultState} />, element);
}

SettingsProvider.jsx

const initialState = {test:'test'}

function SettingsProvider({children, defaultState}) {
    const [state, dispatch] = React.useReducer(
        settingsReducer,
        //This will override initialState entries with the values you passed via Blade
        {
            ...initialState,
            ...defaultState
        }
    );

    return (
        <SettingsContext.Provider value={{ state, dispatch }}>
            {children}
        </SettingsContext.Provider>
    )
}