Question

干草，我想在React中创建可重用的compoenent，比如DialogBox。

它需要类型，消息和标题等字段。

Type可以是'yesNo'字符串或'ok'之一，它定义了应显示多少按钮（是和否，确定）。消息和标题是在对话框内显示的简单文本。

简单的看法： IMG

我创建了DialogBox组件，我可以使用它：

<DialogBox type={'yesNo'} message={'Message'} title={'Title'} />

但我想使用预定义的const：

<DialogBox type={DialogBox.TYPE.YES_NO} message={'Message'} title={'Title'} />

使用简单的导入DialogBox：

import Dialogbox from './DialogBox.js'

实现DialogBox.TYPE.YES_NO

在我的组件DialogBox中，我创建了带有预定义元素的静态对象TYPE：

...
static TYPE = {
   YES_NO: 'yesNo',
   OK: 'ok'
}
...

当我想使用静态来检查子组件中的道具时，一切都很美好：

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.values(DialogBox.TYPE))
};

我得到了一个循环依赖项错误，并且我在道具定义中的DialogBox.TYPE是未定义的。我就是这样看的：

在DailogBox.js中：

import ButtonArea from './BA';

export default class DialogBox extends Component {
 static TYPE = {
  YES_NO: 'yesNo',
  OK: 'ok'
 }

 render() {
  <ButtonArea type={this.props.type} />
 }

}

在ButtonArea.js中：

import DialogBox from './DB';

export default class ButtonArea extends Component {...}

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.values(DialogBox.TYPE))
};

在检查propTypes时，DialogBox是循环依赖的未定义原因。

问题是。有没有办法创建组件来像组件一样使用它，它有内部const对象定义并避免循环依赖。喜欢：

<Test type={Test.TYPE.SUPER_TEST}/>

我不想要导入Test和TestConst并使用它：

<Test type={TestConst.TYPE.SUPER_TEST}/>

Answer 1

你需要更新propsType for button，你需要检查KEYS而不是VALUES，如下所示

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.keys(DialogBox.TYPE))
};

具有consts接口的外部组件进行反应

1 个答案: