javascript - 从 react 功能组件中的箭头函数返回 bool 值

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