React wrapper: React не распознает опору staticContext для элемента DOM

Я пытаюсь создать компонент-оболочку вокруг компонентаact-router-dom NavLink.

Я хотел бы, чтобы мой пользовательский компонент принимал все реквизиты NavLinks и передавал их до NavLink.

Однако, когда я делаю это, я получаю:

Предупреждение: React не распознает пропеллер staticContext на DOM элемент. Если вы намеренно хотите, чтобы он появился в DOM как пользовательский атрибут, записать его как строчные staticcontext вместо этого. если ты случайно передал его из родительского компонента, удалите его из DOM Элемент.

Рабочую демонстрацию проблемы можно найти здесь:

https://codesandbox.io/s/w0n49rw7kw

Ответ 1

Существует способ преодоления этого:

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

Таким образом, ваш ...rest никогда не будет содержать staticContext

Ответ 2

Это обычная проблема с простым решением, как описано в документации React:

Предупреждение о неизвестном подпорке сработает, если вы попытаетесь отобразить DOM элемент с опорой, который не распознается React как законный 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()} />
  }
}

Ответ 3

Данный ответ в документах 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>)
}