有效成分必須返回錯誤

我的代碼：有效成分必須返回錯誤

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

有效成分必須返回錯誤

回答

相關問題