Question

我希望能够进行ajax调用，将JSON数组存储在名为“user”的变量中，并使其可用于我的应用程序中的所有无状态子组件。

我不确定在哪里放置getJSON调用。

JSON文件：

{
  "user": [{
    "firstName": "Cliff",
    "lastName": "Johnson",
    "fullName": "Cliff Johnson",
    "username": "cliffjohnson",
    "userId": "8675309",
    "email": "cliff@cliffjohnson.com",
    "avatarSrc": "../images/avatar.png"
  }]
}

入口点文件：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
{/* import rest of pages Pages */}

window.React = React;

var user;
$.getJSON("./json/user.json", function(json){
user = json; // this is the object I want to make accessible to all children
});

render(
  (<Router history={hashHistory} >
    <Route path="/" component={App}>
      <Route path="/frames" component={Frames} />
      <Route path="/albums" component={Albums} />
      <Route path="/channels" component={Channels} />

      <Route path="/playlist" component={Playlist} />
      <Route path="/mode" component={Mode} />
      <Route path="/history" component={History} />
      <Route path="/settings" component={Settings} />
    </Route>
  </Router>), document.getElementById('content')
);

应用文件：

import React from 'react';
import SideNav from './SideNav/SideNav';
import Frames from './Frames/Frames';

const App = ({ children }) => (
  <div className="container">
    <aside id="sidenav">
      <SideNav />
    </aside>
    <main>
      {children || <Frames />}
    </main>
  </div>
);

App.propTypes = { 
  children: React.PropTypes.object
};

export default App;

示例子组件：

import React from 'react';

const User = ({ avatarSrc, fullName }) => (

  <div className="user">
    <div className="avatar">
      <img src={user.avatarSrc} alt="User Avatar" />
    </div>  
    <div className="user-full-name">
      {user.fullName}
    </div>
  </div>
);

export default User;

Answer 1

正如我在your other question中所解释的那样：您需要将user作为状态放在App和setState()中，然后通过道具将其传递给组件树。

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {};
  }
  componentDidMount() {
    $.getJSON("./json/user.json", (json) => {
      this.setState({user: json}); // Use setState to render the loaded data
    });
  }
  render() {
    return (
      <div className="container">
        <aside id="sidenav">
          <SideNav />
        </aside>
        <main>
          {/* Use cloneElement to add props to dynamic children */}
          {this.props.children ? React.cloneElement(this.props.children, {user: this.state.user}) : <Frames />}
        </main>
      </div>
    );
  }
}

这就是React“不使用Flux或Redux”的方法。如果您想在组件外部管理数据模型，那么需要Flux或Redux。

PS：我认为你想使用IndexRoute或IndexRedirect代替渲染children || <Frames />。

React - 将JSON对象传递给所有无状态子组件

1 个答案: