web-dev-qa-db-ja.com

Reactラッパー：ReactはDOM要素の `staticContext`プロップを認識しません

React-router-dom NavLinkコンポーネントの周りにラッパーコンポーネントを作成しようとしています。

カスタムコンポーネントですべてのNavLinksプロップを受け入れ、NavLinkにプロキシするようにしたいと思います。

しかし、これを行うと、次のようになります：

警告：Reactは、DOM要素のstaticContext小道具を認識しません。意図的にカスタム属性としてDOMに表示したい場合は、代わりに小文字のstaticcontextと綴ります。誤って親コンポーネントから渡した場合は、DOM要素から削除してください。

問題の実際のデモは次の場所にあります。

reactjsreact-routerreact-router-dom
20
Nicolas Widart

克服する方法があります：

const { to, staticContext, ...rest } = this.props;

したがって、...restにはstaticContextは含まれません。

34
Khoa

これは、 React documentation に記載されている単純なソリューションの一般的な問題です。

Reactによって正当なDOM属性/プロパティとして認識されないpropを持つDOM要素をレンダリングしようとすると、unknown-prop警告が発生します。 DOM要素に偽の小道具が浮いていないことを確認する必要があります。

スプレッド演算子を使用して、変数を小道具から引き出し、残りの小道具を変数に入れることができます。

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

小道具を新しいオブジェクトに割り当て、使用しているキーを新しいオブジェクトから削除することもできます。元のthis.propsオブジェクトからpropsを削除しないでください。そのオブジェクトは不変であると見なされるためです。

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === 'horizontal') {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}
4
Nathaniel Hill

Reactドキュメントによる与えられた答えは私の状況には十分ではなかったので、完璧ではないが、少なくともそれほど面倒ではないものを見つけました。

ここで発生したQ/Aを見ることができます： プロパティが適用されるかどうかを確認するためのReacts関数とは？

要点は、あなたのために悪い小道具を選ぶ機能を使用してください。

const SPECIAL_PROPS = [
    "key",
    "children",
    "dangerouslySetInnerHTML",
];

const defaultTester = document.createElement("div")
function filterBadProps(props: any, tester: HTMLElement = defaultTester) {
    if(process.env.NODE_ENV !== 'development') { return props; }

    // filter out any keys which don't exist in reacts special props, or the tester.
    const out: any = {};
    Object.keys(props).filter((propName) => 
        (propName in tester) || (propName.toLowerCase() in tester) || SPECIAL_PROPS.includes(propName)
    ).forEach((key) => out[key] = props[key]);

    return out;
}

個人的には、そもそも警告はまったく役に立たないと感じたので、開発モードではないときにチェックを完全にスキップする行を追加しました（そして警告は抑制されます）。警告にメリットがあると思われる場合は、次の行を削除してください。

if(process.env.NODE_ENV !== 'development') { return props; }

次のように使用できます。

public render() {
    const tooManyProps = this.props;
    const justTheRightPropsForDiv = filterBadProps(tooManyProps);
    const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));

    return (<div {...justTheRightPropsForDiv}>
        <span {...justTheRightPropsForSpan} />
    </div>)
}
2
Seph Reed