Question

我希望使用自定义ValueContainer覆盖，在ValueContainer中呈现了组件，该组件的样式取决于Select是否聚焦。为什么ValueContainer不接收isFocused道具（例如Placeholder），例如，接收

return (
  <SelectContainer
    {...commonProps}
    className={className}
    innerProps={{
      id: id,
      onKeyDown: this.onKeyDown,
    }}
    isDisabled={isDisabled}
    isFocused={isFocused}
  >
    {this.renderLiveRegion()}
    <Control
      {...commonProps}
      innerRef={this.getControlRef}
      innerProps={{
        onMouseDown: this.onControlMouseDown,
        onTouchEnd: this.onControlTouchEnd,
      }}
      isDisabled={isDisabled}
      isFocused={isFocused}
      menuIsOpen={menuIsOpen}
    >
      <ValueContainer {...commonProps} isDisabled={isDisabled}>
        {this.renderPlaceholderOrValue()}
        {this.renderInput()}
      </ValueContainer>

在呈现的Select from Select.js片段渲染方法中，您可以看到isFocused变量在范围内，并且可以轻松地传递下去。

Answer 1

如果您想在isFocused的道具中使用ValueContainer，则必须将其作为一个传递：

<ValueContainer {...commonProps} isDisabled={isDisabled} isFocused={isFocused}>
  {this.renderPlaceholderOrValue()}
  {this.renderInput()}
</ValueContainer>

为什么ValueContainer无法收到isFocused prop

1 个答案: