Question

我有以下反应组件：

class Cmp extends React.Component {
  render () {
    return <h3>{this.props.title}</h3>;
  }
}

但是我想向我的组件的消费者公开或说明使用它与标题，否则它不适用于该组件。

消费者会像

一样使用它

<Cmp title='Some fancy title' />

我需要我的组件的消费者知道他应该提供标题，否则该组件没有任何意义。

Answer 1

您可以使用PropTypes并将其设置为isRequired。您还可以检查道具是否设置为componentWillReceiveProps()并抛出错误。

Answer 2

如果从render方法返回null，则不会呈现任何内容。您可以使用此知识有条件地检查是否传递了prop，如果未传递prop，则返回null。使用 componentWillReceiveProps（）的优势在于您可以使用功能组件而不是类组件。

在极少数情况下，您可能希望组件隐藏自己，即使它由另一个组件呈现。要做到这一点，返回null而不是它的渲染输出。

Preventing Component from Rendering

实际上你也会使用PropTypes。

Cmp.propTypes = {
  title: PropTypes.string.isRequired
};

简短示例

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

const Cmp = (props) => props.title ? <h3>{props.title}</h3> : null

Cmp.propTypes = {
  title: PropTypes.string.isRequired
}

export default Cmp;

是否可以创建React组件接口？

2 个答案: