使用 React Bootstrap 工具提示的警告:对于非布尔属性“show”收到“true”

Question

我为此生气了。我想摆脱这个警告：

index.js：1446 警告：收到非布尔属性的true show .

如果要将其写入 DOM，请传递一个字符串：show="true" 或 show={value.toString((}. indiv(由工具提示创建(

我正在制作用于注册用户的验证表单。当密码验证失败时，我会显示工具提示 - 当两个输入中的密码不同时。

我在构造函数中有附加引用： this.attachRefPass = targetPass => this.setState({ targetPass });

接下来，在构造函数中的其他开始值之间：

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

验证方法：

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

以及窗体和工具提示组件：

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

工具提示来自 react-boostrap：https://react-bootstrap.github.io/components/overlays/

Answer 1

修复

了覆盖层输出show值的错误Boolean
您可以通过覆盖 prop 在本地修复show问题

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

Answer 2

你在 state.showTooltipPass 中设置了一个布尔值(true 或 false (，并将其传递给 Overlay 的 show prop，它似乎需要一个字符串值(”true” 或 ”false” (。

如果将值作为 show={showTooltipPass.toString()} 传入，这会将布尔值转换为字符串，位于您需要它为字符串的位置。