React 和 PropTypes

Question

前段時間我嘗試在 React 中邁出第一步。 現在我正在嘗試創建簡單的待辦事項列表應用程序。 我的一位同事告訴我，將PropTypes與shape和arrayOf一起使用會很好。 我有一個組件將數據傳遞給另一個組件，這是我的問題（ List.js和ListItem.js ）。 我不確定何時、何地以及如何使用帶有shape和arrayOf 的 propTypes 。 哪種方法是正確的？ 在父組件或子組件中定義PropTypes ？ 也許有更好的主意？ 請在下面找到我的代碼，如果您能向我說明如何使用 PropTypes，那就太好了。 我試圖在網絡上搜索一些東西，但我仍然沒有得到它。

主 App.js 文件：

import React from "react";
import "./styles/App.scss";
import List from "./components/List/List";
import AppHeader from "./components/AppHeader/AppHeader";

function App() {
  return (
    <div className="App">
      <AppHeader content="TODO List"></AppHeader>
      <List></List>
    </div>
  );
}

export default App;

AppHeader.js 文件：

import React from "react";
import "./AppHeader.scss";

export default function AppHeader(props) {
  return (
    <div className="header">
      <h1 className="header-headline">{props.content}</h1>
    </div>
  );
}

List.js 文件：

import React from "react";
import "./List.scss";
import ListItem from "../ListItem/ListItem";
import _ from "lodash";

const initialList = [
  { id: "a", name: "Water plants", status: "done" },
  { id: "b", name: "Buy something to eat", status: "in-progress" },
  { id: "c", name: "Book flight", status: "in-preparation" }
];

const inputId = _.uniqueId("form-input-");

// function component
const List = () => {
  const [value, setValue] = React.useState(""); // Hook
  const [list, setList] = React.useState(initialList); // Hook

  const handleChange = event => {
    setValue(event.target.value);
  };

  // add element to the list
  const handleSubmit = event => {
    // prevent to add empty list elements
    if (value) {
      setList(
        list.concat({ id: Date.now(), name: value, status: "in-preparation" })
      );
    }

    // clear input value after added new element to the list
    setValue("");

    event.preventDefault();
  };

  // remove current element from the list
  const removeListItem = id => {
    setList(list.filter(item => item.id !== id));
  };

  // adding status to current element of the list
  const setListItemStatus = (id, status) => {
    setList(
      list.map(item => (item.id === id ? { ...item, status: status } : item))
    );
  };

  return (
    <div className="to-do-list-wrapper">
      <form className="to-do-form" onSubmit={handleSubmit}>
        <label htmlFor={inputId} className="to-do-form-label">
          Type item name:
        </label>
        <input
          type="text"
          value={value}
          onChange={handleChange}
          className="to-do-form-input"
          id={inputId}
        />
        <button type="submit" className="button to-do-form-button">
          Add Item
        </button>
      </form>

      <ul className="to-do-list">
        {list.map(item => (
          <ListItem
            name={item.name}
            status={item.status}
            key={item.id}
            id={item.id}
            setListItemStatus={setListItemStatus}
            removeListItem={removeListItem}
          ></ListItem>
        ))}
      </ul>
    </div>
  );
};

export default List;

和 ListItem.js 文件：

import React from "react";
import PropTypes from "prop-types";
import "./ListItem.scss";

const ListItem = props => {
  return (
    <li className={"list-item " + props.status} key={props.id}>
      <span className="list-item-icon"></span>
      <div className="list-item-content-wrapper">
        <span className="list-item-text">{props.name}</span>
        <div className="list-item-button-wrapper">
          <button
            type="button"
            onClick={() => props.setListItemStatus(props.id, "in-preparation")}
            className="button list-item-button"
          >
            In preparation
          </button>
          <button
            type="button"
            onClick={() => props.setListItemStatus(props.id, "in-progress")}
            className="button list-item-button"
          >
            In progress
          </button>
          <button
            type="button"
            onClick={() => props.setListItemStatus(props.id, "done")}
            className="button list-item-button"
          >
            Done
          </button>
          <button
            type="button"
            onClick={() => props.removeListItem(props.id)}
            className="button list-item-button"
          >
            Remove
          </button>
        </div>
      </div>
    </li>
  );
};

ListItem.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  name: PropTypes.string,
  status: PropTypes.string,
  removeListItem: PropTypes.func,
  setListItemStatus: PropTypes.func
};

export default ListItem;

Answer 1

道具是每個組件。

prop types 的目的是讓你對組件的 props 進行一些類型檢查。

看起來您在 ListItem 組件中做得正確。

基本上，您只需列出組件的所有道具以及它們應該是什么類型。

就像你在這里所做的那樣：

ListItem.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  name: PropTypes.string,
  status: PropTypes.string,
  removeListItem: PropTypes.func,
  setListItemStatus: PropTypes.func
};

Answer 2

我不確定 propTypes 的shape和arrayOf將在哪里使用，但通常，當您嘗試在父組件中渲染子組件並且想要對相關子組件的 props 執行TypeChecking時， PropTypes很有用.

在您的場景中， arrayOf和shape可用於組件內的道具之一，其中道具是特定類型的數組（ arrayOf ）和特定類型的對象（ shape或exact ）。