警告：React无法识别DOM元素上的`previousStep`道具

Question

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,
          },
        ]}
      />
    )
  
  }

}

我正在尝试在react-simple-chatbot中使用react-dropzone，但是当我上传文件时，它会显示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.

我能找到类似的问题，但他们的解决方案对我来说并不奏效。我应该如何使它发挥作用？

编辑：我添加了一个类似于我的方法的示例。

Answer 1

您好亲爱的，您的问题对我来说并不是很清楚，因为它缺少大量信息，如果您将代码放在此处会更好。我不知道您是否遵循react-dropzone文档。在他们的文档中，他们清除了如何在您的应用程序中使用它尝试执行以下程序。就我而言，它没有显示任何警告。

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