React 和导入类

Question

我正在尝试构建一个带有部分视图的视图。为此，我创建了两个类 -SmallPost和PostsList。

SmallPost是一个呈现 JSON 的小类，如下所示：

import React from 'react';
import { render } from 'react-dom';

export default class SmallPost extends React.Component {
  constructor(props) {
    super(props);

    this.post = this.props.data;
  }

  render() {
    /* ... */
  }
}

并PostsList利用它：

import React from 'react';
import { render } from 'react-dom';
import { SmallPost } from './SmallPost';

class PostsList extends React.Component {
  constructor(props) {
    super(props);

    this.list = '/wp-json/wp/v2/posts';
    this.posts = null;
    this.state = {
      posts: null,
      loaded: false
    }
  }

  componentDidMount() {
    const request = new XMLHttpRequest();

    request.open('GET', encodeURI(this.list));
    request.onload = () => {
      this.setState({
        posts: JSON.parse(request.responseText)
      }, this.parsePosts);
    };
    request.send();
  }

  parsePosts() {
    this.posts = this.state.posts.map(post => {
      this.setState({ loaded: true });

      return (
        <SmallPost data={post} />
      )
    });
  }

  render() {
    if(!this.state.loaded) {
      return (<div>Loading...</div>);
    } else {
      return (<div className="posts--loaded">{this.posts}</div>);
    }
  }
}

render(<PostsList />, document.getElementById('posts'));

正如你所看到的，没什么特别的。但这不起作用——我明白了

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

从控制台。当我将SmallPost代码放入文件中时PostsList，它就可以工作。我能做些什么？

Answer 1

您使用的是默认导出，因此无法使用命名导入。

所以你可以从

import { SmallPost } from './smallpost';

到

import SmallPost from './smallpost';

如果你使用 Babel 6.x 你可能需要这样做

import SmallPost from './smallpost';
let SmallPostComponent = SmallPost.default;