javascript - 将逻辑应用于 defaultProps

Question

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

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: ''
}

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

我是否坚持使用这种模式，或者是否可以读取 defaultProps 中的 type 属性来执行如下操作:

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

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

Answer 1

由于您使用的是无状态组件，因此请使用带有默认值的解构而不是 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>