javascript - react 和导入类

我试图建立局部视图。为此，我创建了两个类-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：type不能为null，
  未定义，布尔值或数字。它应该是一个字符串（对于DOM
  元素）或ReactClass（用于复合组件）。


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

最佳答案

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

所以你可以从

import { SmallPost } from './smallpost';

至

import SmallPost from './smallpost';

如果您使用的是Babel 6.x，则可能需要

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

关于javascript - react 和导入类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36278432/