React не распознает реквизит `controlID` для элемента DOM (React- Bootstrap Forms) - PullRequest
Новая
       33

React не распознает реквизит `controlID` для элемента DOM (React- Bootstrap Forms)

0 голосов
/ 17 апреля 2020

При создании формы с использованием компонентов React из react-bootstrap и с использованием кода непосредственно из примера в его документах: 

  <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>

приводит к следующей ошибке в браузере JS console:

React не распознает реквизит controlID для элемента DOM. Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами controlid. Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Можно ли избежать этого сообщения об ошибке, все еще используя функцию контроля идентификатора React Bootstrap? Эти сообщения об ошибках перестали появляться после удаления controlId свойств из всех компонентов.

Использование

  • bootstrap 4.4.1
  • react-bootstrap 1.0.0
  • react-dom 16.13.1
  • react 16.13.1
  • Узел 13.7.0

1 Ответ

0 голосов
/ 18 апреля 2020

Ваш код работает нормально, возможно, проблема не в этой части кода 

const {Form} = ReactBootstrap;

const App = () => {
  return (
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Email address</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text className="text-muted">
        We'll never share your email with anyone else.
      </Form.Text>
    </Form.Group>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin
></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin
></script>


<div id="app"></div>
...