必须返回有效组件错误

Question

我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class App extends Component{
render() {
const numbers = {
first : {
name : "Dad",
number : "1243342432",
info : "Best dad ever!",
birthDay : "4.2.1955"
},
second: {
name : "Mom",
number : "5435234523",
info : "Best mom ever!",
birthDay : "8.2.1967"
},
third: {
name : "Martin",
number : "5742253223",
info : "Best friend Martin ever!",
birthDay : ""
}
};  
const FurtherInfo = (props) => {
<div id={props.number}>
<span className="contact__info"></span>
<span className="contact__more"></span>
</div>
}
const Name = (props) => {
<p id="contact__name">{props.name}</p>
}
const Contant = (props) => {
<li className="contact">
<Name name={props.name}></Name>
<FurtherInfo number={props.number}></FurtherInfo>
</li>
}
const listItems = Object.values(numbers).map(
person => <Contant name={person.name} number={person.number} ></Contant> 
);
return (
<ul>{listItems}</ul>
);
}
}

但得到：A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

查看了此错误的其他问题，不幸的是，它们都不符合我的问题。通常它与不包含 (( 到语句有关return但在我的情况下并非如此。

以前有人处理过这个问题吗？

索引.js一如既往地ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

都不是

const FurtherInfo = (props) => {
<div id={props.number}>
<span className="contact__info"></span>
<span className="contact__more"></span>
</div>
}
const Name = (props) => {
<p id="contact__name">{props.name}</p>
}
const Contant = (props) => {
<li className="contact">
<Name name={props.name}></Name>
<FurtherInfo number={props.number}></FurtherInfo>
</li>
}

实际上返回任何内容(void(。您需要改用()

const FurtherInfo = (props) => (
<div id={props.number}>
<span className="contact__info"></span>
<span className="contact__more"></span>
</div>
)

例如