gpt4 book ai didi

javascript - React 和 PropTypes

转载 作者:行者123 更新时间:2023-12-01 00:19:33 25 4
gpt4 key购买 nike

不久前,我尝试在 React 中迈出第一步。现在我正在尝试创建简单的待办事项列表应用程序。我的一位同事告诉我,将 PropTypesshapearrayOf 一起使用会很好。我有一个组件将数据传递给另一个组件,这是我的问题(List.jsListItem.js)。我不确定何时、何地以及如何将 propTypes 与 shapearrayOf 一起使用。哪种方法是正确的?在父组件还是子组件中定义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;

最佳答案

Prop 是针对每个组件的。

Prop 类型的目的是让您对组件的 Prop 进行一些类型检查。

看来您在 ListItem 组件中做得正确。

基本上,您只需列出组件的所有属性以及它们应该是什么类型。

就像你在这里所做的那样:

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

关于javascript - React 和 PropTypes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59527536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com