是否可以创建一个React组件接口

Question

i具有以下反应组件：

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

，但我想向我的组件的消费者说或说出标题，否则它不起作用。

消费者会像

一样使用它

<Cmp title='Some fancy title' />

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

Answer 1

您可以使用proptypes并将其设置为iSquired。您还可以检查道具是否是在ComponentWillReceiveProps((上设置的，并丢弃您的错误。

Answer 2

如果您从渲染方法中返回null，则没有渲染。您可以使用此知识有条件地检查道具是否通过，并在未传递该道具的情况下返回null。在这里使用 componentWillReceiveProps((的优势是您可以使用功能组件而不是类组件。

在极少数情况下，您可能希望组件可以隐藏自身 由另一个组件渲染。做这个返回null而不是 它的渲染输出。

防止组件渲染

实际上，您也将使用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;