ES6箭頭語法返回功能並不看重

Question

我創建一個與反應子組件組成：

const Miniviews = ({reducedArry}) => { 
    Object.keys(reducedArry).map((applicationId) => { 
    return (
     <div id={applicationId}> 
     {reducedArry[applicationId].map(miniview => (
      <Miniview 
      key={miniview.id} 
      id={miniview.id} 
      title={miniview.name} 
      handleOpenButton={this.handleMiniviewOpenView} 
      />) 
     )} 
     </div> 
    ) 
    }) 
}; 
console.log(Miniviews); 

，並在渲染方法與

{ this.state.showViews  && <Miniviews reducedArry={reducedArry} /> } 

但是顯示它，Miniviews的值是實際上不是函數返回的對象，而是對象本身。在輸出的console.log：

function Miniviews(_ref) { 
     var reducedArry = _ref.reducedArry; 

     Object.keys(reducedArry).map(function (applicationId) { 
      return _react2.default.createElement(
      … 

我怎樣才能使它回到我所期望的，這就是：

<div id="1"> 
<Miniview /> 
<Miniview /> 
</div> 
<div id="2"> 
<Miniview/> 
</div> 

Answer 1

兩個問題：

1. 「Miniviews的值實際上是不是從功能返回的對象」這是正確的，你定義Miniviews爲一個函數（一個箭頭函數），而不是調用它。給它打電話，你會做Miniviews(relevantArgumentHere)之後。

2. 您使用的是詳細箭頭功能，這意味着你需要使用一個明確的return。如果使用簡明箭頭功能（在=>之後沒有{），則返回是隱含的。

這裏的一個簡潔的箭頭函數的一個例子：

const f =() => "foo"; 

和等效冗長：

const f =() => { return "foo"; }; 

因此，要麼簡潔：

const Miniviews = ({reducedArry}) => // Note no { here 
    Object.keys(reducedArry).map((applicationId) => { 
    return (
     <div id={applicationId}> 
     {reducedArry[applicationId].map(miniview => (
      <Miniview 
      key={miniview.id} 
      id={miniview.id} 
      title={miniview.name} 
      handleOpenButton={this.handleMiniviewOpenView} 
      />) 
     )} 
     </div> 
    ) 
    }) 
; // And no } before the ; here 
console.log(Miniviews(someArgumentHere)); 
//     ^^^^^^^^^^^^^^^^^^----- calling the function 

或冗長用return ：

const Miniviews = ({reducedArry}) => { 
    return Object.keys(reducedArry).map((applicationId) => { 
// ^^-- note this return 
    return (
     <div id={applicationId}> 
     {reducedArry[applicationId].map(miniview => (
      <Miniview 
      key={miniview.id} 
      id={miniview.id} 
      title={miniview.name} 
      handleOpenButton={this.handleMiniviewOpenView} 
      />) 
     )} 
     </div> 
    ) 
    }) 
}; 
console.log(Miniviews(someArgumentHere)); 
//     ^^^^^^^^^^^^^^^^^^----- calling the function 

Answer 2

你永遠不會從Miniviews函數返回任何東西。

試試這個：

const Miniviews = ({reducedArry}) => { 
return Object.keys(reducedArry).map((applicationId) => { 
    return (
    <div id={applicationId}> 
     {reducedArry[applicationId].map(miniview => (
     <Miniview 
      key={miniview.id} 
      id={miniview.id} 
      title={miniview.name} 
      handleOpenButton={this.handleMiniviewOpenView} 
      />) 
     )} 
     </div> 
    ) 
    }) 
};