从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} /> )));