使用字符串键名与React PropTypes

我处于需要使用字符串作为对象的键的位置，该对象作为道具传递给我的一些React组件。有没有办法使这个工作与反应PropTypes和通过eslint？使用字符串键名与React PropTypes

下面是一些示例代码：

MyComponent.propTypes = { 
    'string-key-name': PropTypes.shape({ 
    foo: PropTypes.func.isRequired, 
    bar: PropTypes.string.isRequired, 
    }).isRequired, 
};

在上面的代码，string-key-name导致问题。我需要在此对象的键名称中使用-。这可能吗？

编辑

我试图把方括号的字符串键一样['string-key-name']并没有奏效。

EDIT 2

我得到的eslint错误是缺少的道具验证错误。奇怪的是，'string-key-name'没有丢失，但是foo和bar都是。

'.foo' is missing in props validation  react/prop-types 
'.bar' is missing in props validation  react/prop-types

来源

2017-04-25 plmok61

什么是您的棉绒显示的错误/警告？ – gforce301

@ gforce301它说道具缺失道具验证 – plmok61

你是否将道具传递给你的组件？如果不是，请取出'.isRequired' – imjared

编辑：这是因为缺乏信息的完全答非所问。

如果你想使用方括号，你应该把一个变量，而不是一个字符串文字。

const keyName = 'string-key-name'; 
MyComponent.propTypes = { 
    [keyName]: PropTypes.shape({ 
    foo: PropTypes.func.isRequired, 
    bar: PropTypes.string.isRequired, 
    }).isRequired, 
};

不过，我认为你可以禁用eslint在这种情况下，因为要使用-反正。

'string-key-name': PropTypes.shape({ // eslint-disable-line

或

// eslint-disable-next-line 
'string-key-name': PropTypes.shape({

会做的伎俩。

来源

2017-04-25 21:07:42

不幸的是，使用变量也不起作用。 – plmok61

它怎么没用？你是否遇到运行时错误或遇到eslint错误？你能发布错误吗？ –

我只是在错误消息 – plmok61

我终于明白了。

在MyComponent我被解构的道具了，像这样：

render() { 
    const { foo, bar } = this.props['string-key-name']; 
    return (
    <div> 
     {bar} 
    </div> 
);

当我修改我的代码如下图所示，道具验证问题消失。

render() { 
    const props = this.props; 
    return (
    <div> 
     {props['string-key-name'].bar} 
    </div> 
);

来源

2017-04-25 21:41:11 plmok61

'this.props ['string-key-name'] .bar''和'this中添加了另一个编辑。props.bar'是不同的东西。它工作正常吗？ –

@SheheiKagawa我的错误，答案已经更新为正确 – plmok61

啊，谢谢你的更新！ –

使用字符串键名与React PropTypes

回答

相关问题