Material-ui: React 15.0.2 Предупреждения «Неизвестные реквизиты onTouchTap»

Я хотел бы отправить PR, но прямо сейчас я не знаю, как проверить изменения, и устраняют ли эти изменения предупреждение?

Использование Yeoman Webpack и react: ^15.2.1

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MyButton)
    in div (created by MyButton)
    in MyButton (created by AppComponent)
    in div (created by AppComponent)
    in MuiThemeProvider (created by AppComponent)
    in AppComponent

Из простого:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default class MyButton extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton>
          Hello, world!
        </RaisedButton>

      </div>
    );
  }
}

Пакеты.json:

{
  ...
  "devDependencies": {
    ...
    "core-js": "^2.0.0",
    "material-ui": "^0.15.2",
    "normalize.css": "^4.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  }
}

Исправлено добавлением:

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

К компоненту.

Я хотел бы добавить: transitionAppearTimeout

warning.js:44 Warning: Unknown prop `transitionAppearTimeout` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ReactTransitionGroup)
    in ReactTransitionGroup (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline
    in MuiThemeProvider

Появляется только в Dialog

Обновление: неважно, это было с react 15.0.0 , с 15.2.1 его больше нет. Я думаю, они забыли несколько реквизитов.

Я вызываю injectTapEventPlugin() как на клиенте, так и на сервере и все равно получаю множество предупреждений с различными элементами.

Версии:

"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",

Некоторые предупреждения:

Warning: Unknown prop `onTouchTap` on <label> tag. 
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.

@igl попробуйте позвонить injectTapEventPlugin() до ReactDOM.render

@ixrock : вызов injectTapEventPlugin() до ReactDOM.render не решает проблему (по крайней мере, не для меня)

@Ghirigoro та же проблема =\

vendors.js:20314 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton
    in MuiThemeProvider

независимо от использования/не использования injectTapEventPlugin() до/после рендеринга. Есть идеи, ребята?

Добавил предложение @tavurth , и я избавился от ошибки.
Я пробовал это в следующих местах с успехом:

• В компоненте, генерирующем ошибку
• файл маршрутов
• файл app.js
• файл, в котором вызывается ReactDOM.render

Я решил поместить его в файл ReactDOM.render.

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Та же ошибка в CardTitle с реквизитом titleStyle...

warning.js:44 Warning: Unknown prop `titleStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by GroupAdmin)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by GroupAdmin)
    in span (created by GroupAdmin)
    in GroupAdmin (created by Operations)

Фрагмент кода: <CardTitle title="Group Admin" titleStyle={styles.title}/>

Версия пользовательского интерфейса материалов: 0.15.2

Большое спасибо.

Всем привет,

Не уверен, что мой связан, но я получаю эту ошибку при использовании <Chip> .

Unknown prop labelColor on <div> tag.

То же самое для меня :

Предупреждение: неизвестный реквизит translate в теге. Подробнее см. https://fb.me/react-unknown-prop .

И я добавляю:

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

И это НЕ работает 👎

У меня такое же предупреждение. После некоторой отладки я обнаружил, что он возникает из этого кода:

const MenuLeftItem =
  ({text,url}) =>
    <ListItem
      className="menuleft-module-item"
      primaryText={text}
    />

и

<AppBar
   title="Admin Panel"
   iconElementLeft={
      <IconButton>
         <NavigationClose />
      </IconButton>
    }
     onClick={onCollapse}
  />

это мой package.json

"dependencies": {
    "brace": "^0.8.0",
    "d3": "^4.2.2",
    "deepmerge": "^0.2.10",
    "dom-value": "^1.0.1",
    "form-controls": "^1.0.0",
    "form-parse": "^0.1.0",
    "form-urlencoded": "^1.2.1",
    "formsy-material-ui": "^0.5.0",
    "formsy-react": "^0.18.1",
    "is-submittable": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "js-beautify": "^1.5.10",
    "lodash": "^4.14.1",
    "material-ui": "^0.15.4",
    "muicss": "^0.7.3",
    "query-string": "^4.2.2",
    "radium": "^0.18.1",
    "rd3": "^0.7.1",
    "react": "^15.3.1",
    "react-ace": "^3.1.0",
    "react-diff": "0.0.6",
    "react-dimensions": "^2.0.0-alpha1",
    "react-dom": "^15.3.1",
    "react-edit-inline": "^1.0.6",
    "react-graph-vis": "0.0.3",
    "react-hotkeys": "^0.9.0",
    "react-modal": "^1.4.0",
    "react-notification": "^6.1.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.6.1",
    "react-syntax-highlighter": "^2.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "reactable": "^0.14.0",
    "recompose": "^0.20.0",
    "reduce": "^1.0.1",
    "redux": "^3.0.6",
    "redux-actions": "^0.11.0",
    "redux-localstorage": "^0.4.0",
    "redux-saga": "^0.11.0",
    "redux-thunk": "^2.1.0",
    "reduxerit": "^0.4.1",
    "reselect": "^2.0.3",
    "sha1": "^1.1.1",
    "sleep-promise": "^2.0.0",
    "squares": "^0.2.1",
    "uuid": "^2.0.2",
    "vis": "^4.16.1"
  }
}

добавление injectTapEventPlugin() не помогло мне.
я подозреваю, что это как-то связано с плагином React HMR

Я исправил эту проблему, переключившись с использования UMD-версии React на веб-упаковку всего. Я подозреваю, что это исправляет это, потому что некоторая комбинация плагина react-tap-event-plugin и material-ui должна проникнуть в частную внутреннюю часть React, и она не может сделать это из версии UMD. Вздох...

У меня такое же предупреждение для Overlay

Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

Также я прочитал здесь https://github.com/facebook/react/issues/436 , что плагин react-tap-event-plugin, возможно, может быть удален с момента реакции 15. Необходимо изучить.

Я закрываю эту проблему, так как @tavurth определил основную проблему. Спасибо!

Мы полагаемся на react-tap-event-plugin , чтобы добавить свойство onTouchTap .
На самом деле, я рад, что React добавил это предупреждение. Это поможет многим людям, которые упустили этот момент из документации.

В будущем мы планируем удалить эту зависимость в ветке next .
Мы используем событие onClick , так как современные мобильные устройства лучше его поддерживают (без задержки).

Я использовал AppBar, и вот код, который я использую, чтобы исправить это в соответствии с комментариями выше:

const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});

export default Header;

Для тех, кто, как и я, обнаружил эту проблему, применил исправления и проблема осталась: Предлагаемый подход запуска injectTapEventPlugin() работает только в том случае, если вы используете WebPack; Я изменил свое приложение на веб-пакет с браузера, не внес никаких других изменений в код, и ошибка исчезла.

Может ли кто-нибудь сказать мне, для чего здесь injectTapEventPlugin()?

@jakewins : у меня была такая же проблема с браузером. Проблема заключалась в том, что я создаю файл vendor.js и один файл js со всем моим клиентским кодом. Я узнал, что плагин react-event-tap должен быть связан с файлом js, в котором находится ваша реакционная библиотека. Этот подход решил мою проблему с браузером.

Та же проблема. @васпоз

Кажется, это связано с тем, что плагин react-tap-event-plugin поднимается до ^ 2.0.0 и реагирует на 15.4.0. Я использую сборку UMD и вызываю injectTapEventPlugin перед ReactDOM.render.

К сожалению, использование сборки без UMD невозможно.

У кого-нибудь есть рабочая комбинация версии UMD, состоящая из плагина react + react-tap-event-plugin + material-ui?

@oliviertassinari Будет ли достаточно стабильно использовать следующую ветку с более нативным onClick? Меня не волнует, если много вещей сломано, пока это полупригодно для использования.

Будет ли достаточно стабильно использовать следующую ветку с более родным onClick?

@vans163 Вот месячная версия ветки next : http://material-ui-next.azurewebsites.net/. Это зависит от того, что вы подразумеваете под стабильностью.
API изменится, если нам понадобится. Были перенесены только некоторые компоненты, и часто частично. Тем не менее, я переношу свое приложение, чтобы использовать эту ветку на 100%.

На всякий случай, это поможет кому-то, пока новый выпуск не будет готов: я столкнулся с этой проблемой, но как только я переместил

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

строки в файл компонента, где я применяю <MuiThemeProvider> в иерархии компонентов, он начал работать. (Это также то, где я делаю свой mapStateToProps для избыточности, но я предполагаю, что это не имеет значения.) Я ранее применил их в файле для более высокого компонента, который действовал как мой компонент-оболочка.

Я использую извлеченный веб-пакет из create-app-react .

@rdnewman Это работает!!

Большое спасибо!

спасибо всем... У меня было это предупреждение только в тестах, а потом я понял, что injectTapEventPlugin() вызывался не в ходе тестирования компонентов, а только в полноценном приложении

@rdnewman , спасибо! ваш метод работает. Я поместил его в свой файл index.js, где он содержал файл метода ReactDOM.render, и он также работал таким образом. 👍

Я придумал это, используя create-react-app прошлой неделе. React появился в версии 15.4.x, и эта ошибка возникает, несмотря на правильный вызов injectTapEventPlugin() . Это обсуждается в плагине react-tap-event-plugin #85 . Ручное сохранение/установка react-tap-event-plugin в 2.0.0 решило эту проблему для меня.

надеюсь помочь кому-то, кто использует машинописный текст
Я использую material-ui с машинописным текстом, и у меня была такая же проблема.
После добавления
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
код перед ReactDOM.render выдает ошибку.

Uncaught TypeError: react_tap_event_plugin_1.default не является функцией

это было решено путем изменения стиля импорта
import * as injectTapEventPlugin from 'react-tap-event-plugin';

Слава Богу, в эти дни мне просто нужно установить плагин react-tap-event-plugin версии 2.0.1 и реагировать 15.4.2, затем я перешел к файлу, в котором я визуализирую приложение, и просто включил эти две строки:

импортировать плагин injectTapEventPlugin из «плагина-события-нажатия-реакции»;
injectTapEventPlugin();

И это все 👍

@erick2014 Ага : http://www.material-ui.com/#/get-started/installation

Разочаровывающе неопределенный вопрос. Вернулся после того, как я сделал некоторую реорганизацию кода в сценарии SSR.

Для «реагировать»: «15.4.2»,

Используйте «плагин-событие-реагирование»: «^2.0.0» или плагин-событие-событие «реагирование»: «^2.0.1»

и добавь это
// Необходимо для onTouchTap

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Импорт и добавление injectTapEventPlugin() решили мою проблему.

import injectTapEventPlugin from 'react-tap-event-plugin;

componentWillMount(){
    injectTapEventPlugin();
    }

Я использую Next.JS

Это решение не работает, у меня есть файл tap_events.js, он импортирует каждую страницу.

Мой файл tap_events.js:
импортировать плагин injectTapEventPlugin из «плагина-события-ответа-нажатия»
if (тип окна !== 'undefined') injectTapEventPlugin()