REACT TS コンポーネント ラッパーでカスタム プロパティとネイティブ プロパティを組み合わせるシームレスな方法はありますか?

Question

入力、ボタン、フォームなどのネイティブ機能を拡張するコンポーネントがいくつかありますが、チームが必要とするときにすべてのイベント ハンドラーとプロップを含める必要があるのは面倒だと感じています。

私は単純にコンポーネントの prop タイプをネイティブ prop タイプを拡張してから、オブジェクトの伝播を使用してすべてのネイティブ prop を自動的に適用しようとしました。次の問題は、カスタム props がサポートされていないため、ネイティブ要素に適用すべきではないことです。

この問題を解決するには、私が見つけた唯一の解決策は、コンポーネント パラメーター内の各カスタム プロップの名前を次のようにコピーすることでした: {customProp1、customProp2、...nativeProps}。ただし、この解決策は、すべてのネイティブ プロップを追加するよりははるかに優れていますが、すべてのプロップをコピーする必要があり、プロップが失われます。私はプロパティとローカル変数を区別するために使用される接頭辞が好きです。

カスタム プロップからネイティブ プロップをフィルターで除外する賢い方法はありますか?

達成したいことの例:

リーリー

私の現在の最良の解決策は、各プロップ名をコピーし、残りのプロップにスプレッド演算子を使用することです。

リーリー

Answer 1

interface を extends で使用してみましたか?

リーリー

それ以外の場合は、ネイティブ ボタンの小道具をネストできます:

リーリー