javascript - 将逻辑应用于defaultProps

我有一个具有一个必需属性和一个可选属性的组件。可选属性充当替代机制，如果不存在，则默认为从必需属性派生的值。设置如下:

function fruitColour(fruit) {
  switch (fruit) {
    case 'banana':
      return 'yellow';
  }
}

const Fruit = (props) => {
  const { type } = props;
  let { colour } = props;

  colour = colour || fruitColour(type);

  return <p>A yummy {colour} {type}!</p>
}

这使我可以拥有成熟的香蕉:

<Fruit type='banana' />

或更年轻的未成熟香蕉:

<Fruit type='banana' colour='green' />

我正在研究的项目要求，如果未将prop值读取为常量，则必须在defaultProps中为其指定默认值。目前，我正在这样做:

Fruit.defaultProps = {
  colour: ''
}

但这很愚蠢，因为我组件的逻辑已经处理了默认状态。

我是否坚持使用此模式，还是可以读取type中的defaultProps属性来执行以下操作:

Fruit.defaultProps = {
  colour: (props) => fruitColour(props.type)
}

...然后再读取colour属性作为常量，是否删除默认逻辑？

最佳答案

由于您使用的是无状态组件，因此请使用默认值而非defaultProps进行解构。由于默认参数是evaluated each time the function called，因此您可以调用fruitColour(fruit)，并将其结果用作默认参数。

const Fruit = ({ type, color = fruitColour(type) }) => (
  <p>A yummy {color} {type}!</p>
);

ReactDOM.render(
  <div>
    <Fruit type="banana" color="red" />

    <Fruit type="banana" />
  </div>,
  document.getElementById('app')
);

function fruitColour(fruit) {
  switch (fruit) {
    case 'banana':
      return 'yellow';
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>