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);

并使用

在render方法中显示它

{ 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

两个问题：

＆＃34; Miniviews的值实际上不是函数返回的对象＆＃34; 没错，你定义{{1}作为一个函数（一个箭头函数），而不是调用它。要调用它，您可以在Miniviews(relevantArgumentHere)之后执行。{/ p>
您正在使用详细箭头功能，这意味着您需要使用明确的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>
     )
   })
 };

ES6箭头语法返回的函数不是值

2 个答案: