React非布尔属性`show`传入布尔值`true`的警告排查

问题描述 #

开发React的FormTiket组件时遇到警告：

Warning: Received true for a non-boolean attribute show

尝试将input的show属性改为字符串形式show="true"后，警告仍未消除。

原始组件代码 #

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container } from "react-bootstrap";

const FormTiket = () => {
  const [show, setShow] = useState(true);
  return (
    <div className="bgForm">
      <main className="py-5 px-5">
        <Container>
          <div className="parent">
            <div className="div1 d-flex justify-content-center">
              <h3 className="text-light">Booking</h3>
            </div>
            <div className="div2">
              <a href="/login">
                <h5>Login</h5>
              </a>
            </div>
            <div className="div3 ">
              <label className="form-label" htmlFor="typeDriver">
                Dari
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div4">
              <label className="form-label" htmlFor="typeDriver">
                Dari
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div5">
              <div className="d-flex">
                <div className="form-check">
                  <input
                    onClick={() => setShow(true)}
                    className="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Sekali Jalan
                  </label>
                </div>
                <div className="form-check">
                  <input
                    onClick={() => setShow(false)}
                    className="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Pulang Pergi
                  </label>
                </div>
              </div>
              <label className="form-label" htmlFor="typeDriver">
                Date :
              </label>
              <div className="input-group mb-3">
                <input
                  show={show}
                  type="date"
                  name="date"
                  id="date"
                  className="form-control bg-transparent border-dark"
                  placeholder="Pilih Tanggal"
                />
                {!show && (
                  <input
                    type="date"
                    name="date"
                    id="date"
                    className="form-control bg-transparent border-dark"
                    placeholder="Pilih Tanggal"
                  />
                )}
              </div>
            </div>
            <div className="div6">
              <label className="form-label" htmlFor="tipeDriver">
                Penumpang
              </label>
              <input
                type="number"
                name="penumpang"
                id="penumpang"
                className="form-control bg-transparent border-dark"
                placeholder="Jumlah Penumpang"
              />
            </div>
            <div className="div7">
              <label className="form-label" htmlFor="typeDriver">
                Class
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div8 d-grid">
              <div
                className="d-grid gap-2"
                style={{ position: "relative", top: "30px" }}
              >
                <button
                  className="btn btn-light shadow py-2 mb-5 bg-body rounded"
                  type="submit"
                >
                  <b>Cari Tiket</b>
                </button>
              </div>
            </div>
          </div>
        </Container>
      </main>
    </div>
  );
};

export default FormTiket;

修改尝试 #

<div className="input-group mb-3">
  <input
    show="true"
    type="date"
    name="date"
    id="date"
    className="form-control bg-transparent border-dark"
    placeholder="Pilih Tanggal"
  />
  {show == false && (
    <input
      type="date"
      name="date"
      id="date"
      className="form-control bg-transparent border-dark"
      placeholder="Pilih Tanggal"
    />
  )}
</div>

解决方案 #

问题根源 #

原生HTML的input标签并没有show这个标准属性，React会将所有非标准属性渲染到DOM节点上。当你传递布尔值true/false时，React会触发该警告；即使改成字符串"true"，这个属性本身依然是无效的非标准属性，警告会继续存在。

正确修改方式 #

你已经通过{!show && (...)}实现了第二个日期输入框的条件渲染，第一个输入框是始终显示的，完全不需要添加show属性——直接删掉第一个input上的show属性即可解决警告。

修改后的对应代码片段：

<div className="input-group mb-3">
  <input
    type="date"
    name="date"
    id="date-depart"
    className="form-control bg-transparent border-dark"
    placeholder="Pilih Tanggal Keberangkatan"
  />
  {!show && (
    <input
      type="date"
      name="date-return"
      id="date-return"
      className="form-control bg-transparent border-dark"
      placeholder="Pilih Tanggal Kembali"
    />
  )}
</div>

额外优化 #

• 两个输入框的id原本都是date，违反HTML中id必须唯一的规范，建议修改为date-depart和date-return这类区分性ID，同时更新对应的name属性和占位符文本，提升语义化和用户体验。
• 单选框的id也重复使用了flexRadioDefault1，同样需要修改为唯一ID，比如flexRadioOneWay和flexRadioRoundTrip，并同步更新<label>的htmlFor属性。

内容的提问来源于stack exchange，提问作者Rayhan Putra Jafandi