React 在 this.props.children 上设置默认道具答案

【问题标题】：React Set Default Props on this.props.childrenReact 在 this.props.children 上设置默认道具
【发布时间】：2018-10-07 08:06:34
【问题描述】：

我正在使用 react 故事书，想知道如何为组件设置默认道具？

我的应用程序中的组件是一个轨道并获取数据 - 一个图像。这是使用 {this.props.children} 设置的。

在我的 rail 组件中，我想设置默认道具，以便在数据获取失败时仍然呈现项目。

这是我的组件 - 向下滚动底部以设置 defaultProps：

import React, { Component } from 'react';
import './index.css'; // styles from

// import Slider from 'react-slick';
import classNames from 'classnames';

import PrimaryButton from '../PrimaryButton';

export default class HeroRail extends Component{
  render() {
    const {title, icon, opacity, railActive} = this.props;
    const railStyle = {
      opacity:opacity
    };
    const iconStyle = {
      background: `center / contain url(${icon}) no-repeat`
    };
    const cName = classNames('HeroRail', {
      railActive:railActive
    });   

    console.log("props", this.props);

    return (
      <div className={cName} style={railStyle}>
        <div className={'rail-details'}>
          <div className={'top-details'}>
            <div className={'title-lockup'}>
              <div className={'icon'} style={iconStyle}></div>
              <h3 className={'rail-title'}>{title}</h3>
            </div>
            <PrimaryButton label={'View All'} light={true}/>
          </div>

          <div className={'rail-navigation'}>
            <PrimaryButton icon='' light={true} />
            <PrimaryButton icon='' light={true} />
          </div>
        </div>

        <div className={'rail-items'}>
          {this.props.children}
        </div>
      </div>
    );
  }
};

HeroRail.defaultProps = {

};

这是获取成功时 children 道具的外观。

【问题讨论】：

标签： javascript reactjs react-props

【解决方案1】：

您可以使用类名设置默认道具，如下所示。

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

您可以参考此link from react's documentation 了解更多信息。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
根据您的评论更改了答案。

【解决方案2】：

解决此问题的一种方法是导入“prop-types”组件，请参见以下示例：-

import PropTypes from 'prop-types';

const propertyType = ({[name_of_property]}) => {
  <div><h1>{name_of_property}</h1></div>
};

propertyType.propTypes = {
  [name_of_property]: PropTypes.string,
};
propertyType.defaultProps ={
  [name_of_property]: [default_value],
};

尽可能阅读这篇文章：https://www.npmjs.com/package/prop-types

【讨论】：

【解决方案3】：

解决问题的一种方法是使用static propTypes

static propTypes = {
    children: PropTypes.node.isRequired,
}

希望我推荐的另一种解决问题的方法是不渲染组件，除非您已获取值

if(!this.props.children){
    return(<div>Loading ....... </div>
}
 return (
      <div className={cName} style={railStyle}>
        <div className={'rail-details'}>
          <div className={'top-details'}>
            <div className={'title-lockup'}>
              <div className={'icon'} style={iconStyle}></div>
              <h3 className={'rail-title'}>{title}</h3>
            </div>
            <PrimaryButton label={'View All'} light={true}/>
          </div>

          <div className={'rail-navigation'}>
            <PrimaryButton icon='' light={true} />
            <PrimaryButton icon='' light={true} />
          </div>
        </div>

        <div className={'rail-items'}>
          {this.props.children}
        </div>
      </div>
    );

【讨论】：