Ich versuche, React zu lernen, aber das PropTypes gibt auch bei Verwendung mit isRequired keinen Fehler aus. Mache ich etwas falsch.

Der Code ist so

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">

    function SayHello(props) {
        return (
            <div>
                Hello {props.firstName} {props.lastName}!
            </div>
        )
    }

    SayHello.propTypes = {
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
    }

    ReactDOM.render(<SayHello />, document.getElementById('root'))

</script>

Sollte dies nicht ein error oder ein warning werfen, wenn firstName und lastName nicht gesendet werden.

Daher sind diese beiden Requisiten ähnlich obligatorisch.

<SayHello firstName="John" lastName="Doe" />

Ich erhalte keine Fehler oder Warnungen in meinem Browser.

2
Nithin 18 Jän. 2019 im 13:14

3 Antworten

Beste Antwort

Möglicherweise liegt ein Problem mit der minimierten Version der Proptypen vor.

Ändere dein

https://unpkg.com/prop-types@15.6.2/prop-types.min.js

Zu

https://unpkg.com/prop-types@15.6.2/prop-types.js

Sie erhalten eine Warnung Fehlgeschlagener Proptyp.

3
anonymous 18 Jän. 2019 im 11:07

Hier ist die funktionierende Lösung https://codesandbox.io/s/ymorp9y17v

import * as PropTypes from "prop-types";

const SayHello = props => {
  return (
    <div>
      Hello {props.firstName} {props.lastName}!
    </div>
  );
};

SayHello.propTypes = {
  firstName: PropTypes.string.isRequired,
  lastName: PropTypes.string.isRequired
};

export default SayHello;
2
landorid 18 Jän. 2019 im 10:43

BEARBEITEN

@JS Engine korrekt, PropTypes von der Produktionsversion in die Entwicklungsversion ändern.

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">

    function SayHello(props) {
        return (
            <div>
                Hello {props.firstName} {props.lastName}!
            </div>
        )
    }

    SayHello.propTypes = {
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
    }

    ReactDOM.render(<SayHello />, document.getElementById('root'))

</script>
1
Kyaw Kyaw Soe 18 Jän. 2019 im 11:15