javascript - React - 将 JSON 对象传递给 const

Question

我正在尝试将一个 json 对象放入一个 const 中。我很乐意用 vars 做这件事，比如

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

但是对于无状态常量，我不太确定。

我哪里出错了？

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;

链接到我的应用程序的更详细结构:

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.

当然，您没有让这个组件有状态。您可以将状态移动到父组件(如顶级 View )并将 user 作为 props 向下传递。那么您可以改用无状态功能组件。