리액트 래퍼:React가 DOM 요소에서 staticContext 프로펠을 인식하지 않습니다.

리액트 래퍼:React가 DOM 요소에서 staticContext 프로펠을 인식하지 않습니다.

react-router-dom 주위에 래퍼 컴포넌트를 생성하려고 합니다.NavLink요소.

내 커스텀 컴포넌트가 NavLinks 소품을 모두 받아 들여 프록시하고 싶다.NavLink.

하지만 이렇게 하면 다음과 같은 것을 얻을 수 있습니다.

경고: 리액트가 인식되지 않습니다.staticContextDOM 요소의 프로포트를 사용합니다.의도적으로 커스텀 속성으로 DOM에 표시하려면 소문자로 입력합니다.staticcontext대신.부모 컴포넌트에서 실수로 전달된 경우 DOM 요소에서 제거합니다.

이 문제의 데모는 다음 URL에서 확인할 수 있습니다.

• https://codesandbox.io/s/w0n49rw7kw

이를 극복하는 방법은 다음과 같습니다.

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

그래서 당신의...rest포함시키지 않다staticContext

이것은 React 문서에 기재되어 있는 간단한 솔루션에서 흔히 볼 수 있는 문제입니다.

unknown-prop 경고는 React에 의해 법적 DOM 속성으로 인식되지 않는 소품을 사용하여 DOM 요소를 렌더링하려고 하면 발생합니다.DOM 요소에 가짜 소품이 떠다니지 않도록 해야 합니다.

확산 연산자를 사용하여 소품에서 변수를 추출하고 나머지 소품을 변수에 넣을 수 있습니다.

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

또한 소품을 새 객체에 할당하고 사용 중인 키를 새 객체에서 삭제할 수도 있습니다.원래 this.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()} />
  }
}

이것은, 아마, 이 기능을 사용하고 있었을 가능성이 있습니다.{...props}컴포넌트 내 어딘가에 있습니다.

리액트의 예:

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

우리는 잡는다layout에 포함되지 않도록 따로따로{...rest}.

React docs가 제시한 답변은 제 상황에 맞지 않아 완벽하지는 않지만 적어도 그렇게 번거롭지는 않은 답변을 찾아 개발했습니다.

여기서 Q/A를 확인할 수 있습니다.속성이 적용되는지 여부를 확인하기 위한 Response 함수는 무엇입니까?

요점은 나쁜 소품들을 골라내는 기능을 사용하라는 것이다.

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>)
}

react-admin에서 이 문제가 발생한 경우 Admin의 자녀로서 Link가 없는지 확인합니다.다음과 같이 합니다.

<Admin layout={props => <Layout/>}>
  <Link to="/something">something</Link> <-- causing issue
</Admin>

다른 컴포넌트로 옮겨주세요.예를 들어 레이아웃 내부입니다.

camel Case 속성을 가진 자 컴포넌트의 데이터를 전달해도 같은 문제가 발생하였습니다.

리액트가 이 값을 .moreInfoDOM ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」 어트리뷰트로 에 는, 「DOM」으로 합니다.moreinfo합니다.부모 컴포넌트에서 실수로 전달된 경우 DOM 요소에서 제거합니다.

 <CenteredModal
      moreInfo={viewType}
 />

이 오류를 수정하기 위해 속성에는 모두 소문자를 사용했습니다.

 <CenteredModal
      moreinfo={viewType}
 />

언급URL : https://stackoverflow.com/questions/49358560/react-wrapper-react-does-not-recognize-the-staticcontext-prop-on-a-dom-elemen