Question

我为此感到生气。我想摆脱该警告：

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

如果要将其写入DOM，请改为传递一个字符串：show =“ true”   或show = {value.toString（）}。       在div中（由工具提示创建）

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

我在构造函数中有attatchRefs： 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的问题是the bug，
您可以通过覆盖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），并将其传递给Overlay的show道具，后者似乎期望使用字符串值（{ {1}}或”true”）。

如果您以”false”的形式传递值，则会将布尔值转换为需要的字符串形式的字符串。

React Bootstrap工具提示警告：非布尔属性show收到true

2 个答案: