Question

我正在尝试使用partials构建视图。为此，我创建了两个类 - 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， undefined，boolean或number。它应该是一个字符串（对于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;

反应和导入类

1 个答案: