使用字符串鍵名與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

回答

相關問題