javascript - 必须返回有效组件错误

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 有关声明，但不是我的情况。

以前有人处理过这个吗？

index.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>
)

例如