在React PropTypes中使用字符串键名

Question

我需要使用字符串作为我作为对象传递给一些React组件的对象的键。 有没有办法使它与React PropTypes一起使用并传递eslint？

这是一些示例代码：

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

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

编辑

我尝试在字符串键周围放置方括号，例如['string-key-name'] ，但它不起作用。

编辑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

Answer 1

编辑 ：由于缺乏信息，这是一个完全不相关的答案。

如果要使用方括号，则应放置变量而不是字符串文字。

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({

会成功的

Answer 2

我终于弄明白了。

在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>
  );