Структура DefaultProps для компонента React

Question

На самом деле я учусь проектировать компоненты React, и мне нужно создать DefaultProp для свойства на нем.Это мой код:

import React from 'react'
import PropTypes from 'prop-types'

class Component extends React.Component{

  constructor(props){
    super(props)
  }

  render(){
    return(
      <li className="nav-item">
        <a className="nav-link" href={this.props.element.value1}>{this.props.element.value2}</a>
      </li>
    )
  }
}    

Component.defaultProps = {  // does not set the default value when value1 is not passed
  element: {value1: '#', value2: 'foo'}
}

export default Component

Поскольку у моего свойства element есть два свойства (value1 и value2), я не могу обратиться к нему до доступа к его свойствам и установить значение по умолчанию.

Я также пробовал эти варианты, в результате чего все они выдавали ошибку:

Component.defaultProps = {
  element.value1: '#'
}

Component.defaultProps = {
  this.props.element.value1: '#'
}

Answer 1

Вы можете использовать ES6 default arguaments.О них стоит прочитать здесь в нем говорится:

В JavaScript параметры функции по умолчанию имеют значение undefined.Однако часто бывает полезно установить другое значение по умолчанию.Вот где могут помочь параметры по умолчанию.

Вот пример, который может помочь объяснить следующее:

function getInfo (name, year = 2018, color = 'blue') {
  console.log(name, year, color);
}

getInfo('Chevy', 1957, 'Green');  // result --> "Chevy" 1957 "Green"
getInfo('Benz', 1975);  // result  --> "Benz" 1975 "blue"
getInfo('Honda');  // result  --> "Honda" 2018 "blue"

Я бы порекомендовал что-то вроде следующего.

  render() {
    const {
      value1 = 'defaultValue1',
      value2 = 'defaultValue2'
    } = this.props;

    return(
      <li className="nav-item">
        <a className="nav-link" href={value1}>{value2}</a>
      </li>
    )
  }

Если реквизиты value1 или value2 не определены, по умолчанию будет введено значение, которое вы вводите.

Answer 2

Поскольку propType из element равно shape со свойствами value1 и value2, вам необходимо установить объект в качестве значения по умолчанию со следующими свойствами:

Component.defaultProps = {
  element: {value1: '#', value2: 'foo'}
}

Обратите внимание, чтозначение по умолчанию используется только в том случае, если вы не предоставите компоненту element реквизит, т.е.

<Component element={{value1: '#'}}/>

не добавит реквизит value2 для вас.Если это то, что вы хотите, вам нужно сделать это самостоятельно:

render(){
    const value2 = this.props.element.value2 || 'default-value'
    return(
      <li className="nav-item">
        <a className="nav-link" href={this.props.element.value1}>{value2}</a>
      </li>
    )
  }

И тогда вам не следует указывать value2 как isRequired.