有效成分必须返回错误

我的代码：有效成分必须返回错误

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是永远都不

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> 
}

ReactDOM.render(<App />, document.getElementById('root'));

来源

2017-08-10 Jousi

基本ES6：为您打开'{箭头功能尽快'你失去做一个隐含回报的能力;你必须显式返回''，或者在不需要的时候删除'{}'，例如，如果函数包含单个语句。 –

[箭头函数中的卷边括号]的可能重复（https://stackoverflow.com/questions/35440265/curly-brackets-in-arrow-functions） –

实际上返回任何东西（void）。您需要使用()！而非

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

例如

来源

2017-08-10 21:35:58

有效成分必须返回错误

回答

相关问题