Question

我正在尝试将json对象放入const中。我很自在地使用vars，比如

{this.props.user.map(function(user){...

但是对于无国籍的const，我并不完全确定。

我在哪里错了？

import React from 'react';

var user;
$.getJSON("./json/user.json", function(json){
    user = json;
});

const User = ({ user }) => (

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

User.PropTypes = {
  avatarSrc: React.PropTypes.string,
  fullName: React.PropTypes.string
};

export default User;

链接到我的APP的更详细结构：

React - passing JSON objects to all stateless child components

Answer 1

你编写这个组件的方式不是无状态的（user是状态），所以你不应该使用stateless functional component，你应该使用stateful component class：

class User extends React.Component {
  static propTypes = {
    user: React.PropTypes.object
  };
  state = {};
  componentDidMount() {
    $.getJSON("./json/user.json", (json) => {
      this.setState({user: json});
    });
  }
  render() {
    let user = this.state.user;
    return (
      <div className="user">
        <div className="avatar">
          { user && <img src={user.avatarSrc} height="30" /> }
        </div>  
        <div className="user-full-name">
          { user && user.fullName }
        </div>
      </div>
    );
  }
}

Here it is working in CodePen.

当然，你没有拥有来使这个组件有状态。您可以将状态移动到父组件（如顶级视图）并将user向下传递为道具。然后你可以使用无状态函数组件。

Answer 2

您可能会考虑做这样的事情。这分离了获取数据和显示数据的工作。

import React from 'react';
import User from './user';

class UserContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: {} }
  }

  componentDidMount() {
    $.getJSON("./json/user.json", function(json) {
      this.setState({user: json})
    }
  }

  render() {
    return <User {...this.state.user} />
  }
}

export default UserContainer;

import React from 'react';

const User = ({ avatarSrc, fullName }) => (
  <div className="user">
    <div className="avatar">
      <img src={avatarSrc} height="30" />
    </div>  
    <div className="user-full-name">
      {fullName}
    </div>
  </div>
);

User.PropTypes = {
  avatarSrc: React.PropTypes.string,
  fullName: React.PropTypes.string
};

export default User;

React - 将JSON对象传递给const

2 个答案: