React: Erforderliche Requisiten, die mit cloneElement bereitgestellt werden, zeigen weiterhin eine Warnung in der Konsole an

Erstellt am 27. Juli 2015 · 3Kommentare · Quelle: facebook/react

Ich habe ein Beispiel gemacht, damit es leichter zu verstehen ist, aber im Grunde wird in der Konsole eine Warnung wegen "fehlende erforderliche Requisiten" angezeigt.

Die Requisiten werden mit React.cloneElement an das Element übergeben, daher hatte ich nicht erwartet, eine Warnung vor fehlenden Requisiten zu erhalten. Ich verstehe, dass dies ein Randfall sein könnte ...

https://jsfiddle.net/kdsvgbzu/1/

<A name="name" value="value">
    <B></B>
</A>

class A extends React.Component {
    render() {
        return (
            <div>
                {React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(child, {
                        name: this.props.name,
                        value: this.props.value
                    });
                }, this)}
            </div>
        );
    }
}

A.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

class B extends React.Component {
    render() {
        return <span>{this.props.name} : {this.props.value}</span>;
    }
}

B.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

Quelle

tleunen

Hilfreichster Kommentar

Ich weiß nicht, was Ihr wirklicher Anwendungsfall @tleunen war , aber ich bin auf dieses Problem

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

Am Ende habe ich das Problem mit einer eleganteren Lösung umgangen:

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

Mir gefällt es viel besser, da die Abhängigkeit von ComponentRequiringTheNumber explizit ist und die Rolle von NumberSelector wird. Auf diese Weise werden die der verschachtelten Komponente gegebenen Requisiten nur dann ausgewertet, wenn sie relevant sind.

Angewendet auf Ihre Geige: https://jsfiddle.net/ap1e9rk3/1/

micaste am 1. März 2017

👍15 🎉3

Alle 3 Kommentare

Dies ist beabsichtigt; Die Validierung von Requisiten zum Zeitpunkt der Elementerstellung führt zu nützlicheren Fehlern. Es entspricht auch besser dem Verhalten von statischen Typsystemen wie Flow. Im Moment ist es am besten, diese Requisiten einfach als optional zu markieren. Wir können in Zukunft auch eine Funktion namens Kontext einführen, die eine weitere unterstützte Möglichkeit bietet, Requisiten von einem Elternteil wie A an ein Kind wie B zu übergeben.

sophiebits am 27. Juli 2015

👍8 😕7 ❤3

Das ist was ich dachte. Danke @spicyj

tleunen am 27. Juli 2015