Предупреждение: React не распознает реквизит `previousStep` для элемента DOM - PullRequest
Новая
       11

Предупреждение: React не распознает реквизит `previousStep` для элемента DOM

0 голосов
/ 08 мая 2018 

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Dropzone from 'react-dropzone';

class Form extends Component {

  constructor(props){
    super(props);

    this.state = {
      // some other states
      file: ''
    };
  }
  
  onDrop(acceptedFiles){
    var file = acceptedFiles[0];
    const reader = new FileReader();
    reader.onload = () => {
      const fileAsBinaryString = reader.result;
      this.setState({
        file: fileAsBinaryString
      });
      
      //console.log(fileAsBinaryString);
    }

    reader.readAsBinaryString(file);

    //console.log(file);
  }
  
  render() {
    return(
      <ChatBot
        steps={[
          {
            id: '1',
            message: 'You can add custom components',
            trigger: '2',
          },
          {
            id: '2',
            component: (
              <div>
                 <Dropzone onDrop={this.onDrop.bind(this)} />
              </div>
            ),
            end: true,
          },
        ]}
      />
    )
  
  }

}

Warnings Я пытаюсь использовать реакционную зону сброса в реагирующем простом чате, но когда я загружаю файл, он показывает 2 предупреждения:

  1. React does not recognize the previousStep prop on a DOM element.

  2. React does not recognize the triggerNextStepenter image description here prop on a DOM element.

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

Редактировать: я добавил пример, похожий на мой подход.

1 Ответ

0 голосов
/ 08 мая 2018

Здравствуйте. Уважаемый ваш вопрос, который мне не понятен, так как в нем недостаточно информации. Было бы лучше, если бы вы разместили здесь свой код. Я не знаю, вы следовали документации по реактивной зоне. В своей документации они объяснили, как использовать это в вашем приложении. Попробуйте сделать ниже процедуру. В моем случае это работает без предупреждения. 

import Dropzone from 'react-dropzone'
//OTHERS IMPORT FILE
// ... ... ...
class AddEmployee extends Component {
    constructor(props) {
        super(props);
        this.state = {
            photo: ""
        }
    }
    // OTHERS FUNCTIONS
    // ... ... ....
    onDrop(files) {
        const file = files.find(f => f)
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
            this.setState({
                photo: reader.result,
            })
        }
    }

    render() {
        return (
            // OTHERS DIV
            // ... ... ... ...
            <div className="dropzone">
                <Dropzone onDrop={(e) => this.onDrop(e)}>
                    {this.state.photo != "" ? <img width={195} height={195} src={this.state.photo} /> : <p>Try dropping some photo here or click to select files to upload</p>
                    }
                </Dropzone>
            </div>

            // OTHERS DIV
            // ... ... ... ...
        )
    }
}
...