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

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

我是否坚持使用此模式，或者是否可以阅读type中的defaultProps属性，以便执行以下操作：

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

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将逻辑应用于defaultProps

1 个答案: