reactJs App js - 将传入数据作为道具传递

Question

如何将数据从 app.js 文件作为 json 传递到 app.js 文件作为 props。我想在整个项目中将传入的数据显示为json。

我想将传入的数据作为 props 传递。

{id: 1, first_name: "", last_name: "", 配置文件: {...}} {id: 1, userKey: "0245abb9-2837-4f37-ae02-9be1b88887ef", gsmNo: "05442221111", phone: ""}

从现在开始谢谢你

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config';
import './App.scss';
import {updateCustomer} from "../components/helpers/actions/customerActions";
import { connect } from "react-redux";


const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

// Containers
const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));

// Pages
const Login = React.lazy(() => import('../views/Pages/Login'));
const Register = React.lazy(() => import('../views/Pages/Register'));
const Page404 = React.lazy(() => import('../views/Pages/Page404'));
const Page500 = React.lazy(() => import('../views/Pages/Page500'));


class App extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);

    this.state = {
      profile_items: [ ]
    }
  }

  componentDidMount() {
    this.props.onUpdateCustomer({ID: "-1", customerKey: "-1"});

    console.log("app.js");

        return fetch('http://127.0.0.1:8000/api/account/me',
           {
                headers: {
                    Authorization: `Bearer ${localStorage.getItem("id_token")}`,
                    "Content-Type": "application/json"
                },
            })
            .then((response) => response.json() )
            .then((responseData) => {
              console.log(responseData);
              this.setState({
                profile_items: responseData
              });
              //console.log(this.state.profile_items)
                  return responseData;
            })
            .catch(error => console.warn(error));

  }

  render() {

    return (
        <BrowserRouter>
          <React.Suspense fallback={loading()}>
            <Switch >
              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
              <Route path="/" name="Home" render={props =>  <DefaultLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </BrowserRouter>
    );
  }
}

const mapStateToProps = (state, props) => {
  return state;
};
const mapDispatchToProps = {
  onUpdateCustomer: updateCustomer,
};
export default connect(mapStateToProps, mapDispatchToProps) (App );

Answer 1

您可以使用 HOC 将 props 传递给 Lazy Component。根据我的选择，我认为它可行。创建 HOC：

const LazyHOC = ({ component: Component, ...rest }) => (
    <Component {...rest} />
)

导入您的组件：

const ComponentExample = React.lazy(() => import('./components/ComponentExample'));

用 HOC 包装组件：

const LazyComponentExample = props => <LazyHOC component={ComponentExample} {...props}/>

你可以像这样传递道具：

<React.Suspense fallback={loading()}>
   <Switch >
      <Route 
         exact path="/login" 
         name="Component example" 
         render={<LazyComponentExample props={...} />} />
   </Switch>
</React.Suspense>

reactJs App js - 将传入数据作为道具传递

reactJs App js - passing incoming data as props

reactjs

react-props