重用 React 组件来处理不同的数据库集合

Question

我有一个关于 React 的初学者问题。我刚刚写了这个组件：

class MovieInput extends React.Component {
  constructor(props) {
    super(props);
    firebase.initializeApp(config);
  
    this.state = {
      movies: []
    };
  }

  ....
}

它工作正常，将数据保存在 Firebase 中的一个名为 movies 的集合下。 我开始研究第二个组件，如下所示：

class BookInput extends React.Component {
  constructor(props) {
    super(props);
    firebase.initializeApp(config);
  
    this.state = {
      books: []
    };
  }

  ....
}

我已经可以看到，这两个组件的大部分代码将是相同的，因此编写两次毫无意义。所以问题来了。我怎样才能编写一个标准组件，使用我可以传递的道具，并有类似的东西：

<MediaInput type='movies'/>
<MediaInput type='books'/>

代替：

<MovieInput />
<BookInput />

新组件可能如下所示：

class MediaInput extends React.Component {
  constructor(props) {
    super(props);
    firebase.initializeApp(config);
  
    this.state = {
          // Make use of some prop to set collection adequately ....
          // This is what I don't know how to do ....
          collection: []
    };
  }

  ....
}

设置我的问题的背景可能很有用，说我受到this tutorial 的启发开始编写上面的代码。

........ 再做一些工作：

我正在尝试实现一个更通用的组件 (MediaInput)（如 srgbnd 的回答中所建议的那样）。我通过修改 MovieInput 中的代码来做到这一点（已经工作）。我在实现上仍然遇到了一些问题：

  componentDidUpdate(prevProps, prevState) {
    //if (prevState !== this.state) { // This line may need to be modified to the following.
    if (prevState.db !== this.state.db) { 
      this.writeUserData();
    }
  }

  writeUserData = () => {
    firebase.database()
      .ref("/")
      .set(this.state);
  };


  handleSubmit = event => {
    event.preventDefault();
    .....
    // These 3 lines should be modified. Probably replacing movies by something like state.db.{props.type} ???
    const { movies } = this.state;
    movies.push({ ... });
    this.setState({ movies });
    .....
  };

Answer 1

我不熟悉 firebase 数据库。

但如果我假设

Firebase.database()
      .ref("/")
      .set(this.state);

自己处理你的状态的不同键（就像每个值上的所有 CRUD 行为）这个简单的技巧应该适用于你的 type 道具：

class MediaInput extends React.Component {
  constructor(props) {
    super(props);
    firebase.initializeApp(config);
  
    this.state = {
          // The array will have the key 'movies' or 'books'
          [props.type]: []
    };
  }

  ....
}

但请注意始终定义“类型”道具！

Answer 2

首先，我会将 firebase 详细信息放入一个单独的类中以尊重 SOLID Dependency Inversion Principle。例如：

class AppDatabase {
  constructor() {
    firebase.initializeApp(config);
  }

  addCollection(data) {
    return firebase.database().ref('/').set(data);
  }
}

其次，我会像你一样使用 type 属性。

<MediaInput type='movies'/>
<MediaInput type='books'/>

最后，在组件中使用 AppDatabase。例如

import { AppDatabase } from '../services';

class MediaInput extends React.Component {
  constructor(props) {
    super(props);
    this.appDatabase = new AppDatabase();
  
    this.state = {
      db: {
        [props.type]: []
      }
    };
  }

  addCollection() {
    this.appDatabase.addCollection(this.state.db);
  }
}