Application de la logique à defaultProps

Question

J'ai un composant qui a une propriété obligatoire et une propriété facultative. La propriété optionnelle agit comme un mécanisme de substitution qui, s'il n'est pas présent, prend par défaut une valeur dérivée de la propriété requise. Il est mis en place comme ceci:

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

Cela me permet d'avoir une banane mûre, mûre:

<Fruit type='banana' /> 

Ou un plus jeune, banane verte:

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

Le projet que je suis travaille sur le fait que si une valeur prop n'est pas lue comme une constante, elle doit avoir une valeur par défaut comprise entre defaultProps. Actuellement je fais ceci:

Fruit.defaultProps = { 
    colour: '' 
} 

Mais c'est stupide parce que la logique de mon composant manipule déjà l'état par défaut.

Suis-je coincé avec ce modèle, ou est-il possible de lire la propriété type au sein defaultProps afin de faire quelque chose comme ceci:

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

... puis lire la propriété colour comme constante Eh bien, abandonner la logique par défaut?

Answer 1

Étant donné que vous utilisez un composant sans état, utilisez la déstructuration avec les valeurs par défaut au lieu de defaultProps. L'argument par défaut étant evaluated each time the function called, vous pouvez appeler fruitColour(fruit) et utiliser son résultat par défaut.

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>