Question

我实际上正在学习如何设计React组件，并且需要为其上的属性创建一个DefaultProp。这是我的代码：

<?php 

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

?>

由于我的属性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

Answer 1

由于propType的{{1}}具有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。

Answer 2

您可以使用ES6 default arguaments。值得一读，其中here指出：

在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道具，则默认为您输入的值。

React组件的DefaultProps结构

2 个答案: