无法在其他类组件中加载React类组件

Question

我是新手做出反应，我正在尝试执行下面的代码，但我无法将一个类组件加载到其他类组件中，下面是我的js文件，请告诉我我的代码有什么问题

任何人都可以帮助做出反应基础教程并做出反应

Apicall.js

import React from "react";
import { fetchjson } from '../helpers/helpers';
import posts from "../components/posts";
export default class Apicall extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
}
 componentDidMount() {

fetchjson('posts').then((data) => {
  this.setState({items: data});
});

}

 render() {
return (
  <div>
  <h1>API Call</h1>
  {this.state.items.map(item => 
  <div key={item.id}>
  <h4>{item.title}</h4>
  <p>{item.body}</p>
  <posts posttitle={item}/>
  </div>
  )} 
  </div>
);
}
}

posts.js

import React from "react";
export default class posts extends React.Component {
constructor(props) {
super(props);
 }
render() {
 return (
   <div>{this.props.posttitle.title}</div>
 );
}
}

以下是我得到的输出，无法从posts组件加载渲染

Answer 1

用户定义的React组件must begin with an Uppercase character。

更改

import posts from "../components/posts";

到

import Posts from "../components/posts";

和

<posts posttitle={item}/>

到

<Posts posttitle={item}/>

您可能还希望将类名本身（class posts ...更改为class Posts ...，但在使用export default时不需要它（导入器声明使用的实际标识符。