從React函數組件中的箭頭函數返回布爾值

Question

我正在嘗試從React 16.2中的無狀態功能組件中提取業務邏輯。

這有效：

const Jobs = props => (
  props.entries
    .map(entry => (
      <Job
        entry={entry}
        isInitJobExpanded={
          entry.fields.project['en-US'] &&
          props.initJobExpanded &&
          (entry.fields.project['en-US'] === props.initJobExpanded)}
        key={entry.sys.id}
      />
    )));

當我想提取isInitJobExpanded ，我嘗試了：

const isInitJobExpandedFunction = ({ entry, props }) => (
  entry.fields.project['en-US'] &&
  props.initJobExpanded &&
  entry.fields.project['en-US'] === props.initJobExpanded
);

const Jobs = props => (
  props
    .map(entry => (
      <Job
        entry={entry}
        isInitJobExpanded={isInitJobExpandedFunction}
        key={entry.sys.id}
      />
    )));

但是，我收到錯誤消息：

Invalid prop `isInitJobExpanded` of type `function` supplied to `Job`, expected `boolean`.`

我也嘗試過：

isInitJobExpanded={this.isInitJobExpandedFunction}

isInitJobExpanded={this.isInitJobExpandedFunction()}

isInitJobExpanded={isInitJobExpandedFunction()}

isInitJobExpanded={() => isInitJobExpandedFunction}

等等

提前致謝。

Answer 1

isInitJobExpandedFunction接收一個對象，該對象必須具有兩個字段： entry和props 。 所以你的代碼是：

 const isInitJobExpandedFunction = ({ entry, props }) => ( entry.fields.project['en-US'] && props.initJobExpanded && entry.fields.project['en-US'] === props.initJobExpanded ); const Jobs = props => ( props .map(entry => ( <Job entry={entry} isInitJobExpanded={isInitJobExpandedFunction({entry, props})} key={entry.sys.id} /> )));