Question

我如何重用propTypes让我们在input中说InputWrapper元素。

例如：

class TextInput extends Component {
  static propTypes = {
    theme: PropTypes.oneOf(['themeOne', 'themeTwo']),
    inputProps: ??? // I would like to use the built-in props for React.DOM.input
  }

  render() {
    return <div className={cx(this.props.theme)}>
      <input
        {...this.props.inputProps}
        type="text"
      />
    </div>
  }
}

是否存在内置组件的propTypes定义，我可以重用它？

Answer 1

不确定我是否理解正确，但您可以使用：

class TextInput extends Component {
  static propTypes = {
    theme: PropTypes.oneOf(['themeOne', 'themeTwo']),
    inputProps: PropTypes.shape({
      type: PropTypes.string,
      value: PropTypes.string // etc...
    })
  }

  render() {
    return <div className={cx(this.props.theme)}>
      <input
        {...this.props.inputProps}
        type="text"
      />
    </div>
  }
}

Answer 2

首先无需验证输入道具。当您将它们传递给input时，它会验证它们。

这通常是这样做的：

static propTypes = {
    theme: PropTypes.oneOf(['themeOne', 'themeTwo']),
}

render() {
    const {theme, ...inputProps} = this.props;

    return <div className={cx(theme)}>
      <input
        {...inputProps}
        type="text"
      />
    </div>
}

React实际上并不验证传递给本机组件的属性。如果要验证它们，则必须自己定义验证器道具并重复使用它们。

对某些元素使用内置PropTypes

2 个答案: