Предупреждение с помощью всплывающей подсказки React Bootstrap: получено `true` для не-логического атрибута` show`

Question

Я злюсь от этого.Я хотел бы избавиться от этого предупреждения:

index.js: 1446 Предупреждение: получено true для не-логического атрибута show.

Если вы хотитезапишите его в DOM, передайте вместо него строку: show = "true" или show = {value.toString ()}.в div (создан Tooltip)

Я делаю форму проверки для регистрации пользователей.Я показываю всплывающую подсказку, когда проверка пароля не удается - когда пароли в двух входах различаются.

У меня есть attatchRefs в конструкторе: this.attachRefPass = targetPass => this.setState({ targetPass });

Далее, между другими начальными значениями в конструкторе:

this.state = {
 [...] 
      password: "",
      password2: "",
      showTooltipPass: false,
[...]
}

Метод проверки:

 passwordValidation = () => {
    this.setState({
      showTooltipPass: this.state.password === this.state.password2
    });
  };

И компоненты Form и Tooltip:

<Form.Group as={Col} controlId="formGridUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control
                  required
                  name="username"
                  placeholder="Username"
                  onChange={this.onChangeUsername}
                  ref={this.attachRefUser}
                />
                <Overlay
                  target={targetUser}
                  show={showTooltipUser}
                  placement="right"
                >
                  {props => (
                    <Tooltip id="overlay-example" {...props}>
                      There is one username like that already in the system!
                    </Tooltip>
                  )}
                </Overlay>
              </Form.Group>

Подсказка из реактивного ускорителя: https://react -bootstrap.github.io/components/overlays/

Answer 1

Это ошибка , которая была исправлена, что Оверлей выводит show значение как Boolean
Вы можете решить проблему локально с помощью переопределения show prop

{props => (
    <Tooltip id="overlay-example" {...props} show={props.show.toString()}>
        There is one username like that already in the system!
    </Tooltip>
)}    

Answer 2

Вы устанавливаете логическое значение (true или false) в state.showTooltipPass и передаете его в show пропеллер Overlay, который, как представляется, ожидает строковое значение (”true” или ”false”).

Если вы передадите значение как show={showTooltipPass.toString()}, это преобразует логическое значение в строку в том месте, где вам нужно, чтобы она была строкой.