javascript - 一个组件在另一个组件中 react 的 Fire 函数

Question

我是 React 新手，我的代码有一些问题。我将尝试描述我所拥有的。

首先，我尝试创建简单的待办事项列表应用程序，可以为每个添加的任务添加/更改状态。

这是一些代码:

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></AppHeader>
      <List></List>
    </div>
  );
}

export default App;

List.js代码

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

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" }
];

// 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 handleClick = id => {
    console.log(id);
    setList(list.filter(item => item.id !== id));
  };

  // adding status to current element of the list
  const setElementStatus = (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}>
        <input
          type="text"
          value={value}
          onChange={handleChange}
          className="to-do-form-input"
        />
        <button type="submit" className="button to-do-form-button">
          Add Item
        </button>
      </form>

      <ul className="to-do-list">
        {list.map(item => (
          <li className={"to-do-list-element " + item.status} key={item.id}>
            <span className="to-do-list-text">{item.name}</span>
            <button
              type="button"
              onClick={() => setElementStatus(item.id, "in-preparation")}
              className="button to-do-list-button"
            >
              In preparation
            </button>
            <button
              type="button"
              onClick={() => setElementStatus(item.id, "in-progress")}
              className="button to-do-list-button"
            >
              In progress
            </button>
            <button
              type="button"
              onClick={() => setElementStatus(item.id, "done")}
              className="button to-do-list-button"
            >
              Done
            </button>
            <button
              type="button"
              onClick={() => handleClick(item.id)}
              className="button to-do-list-button"
            >
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default List;

目前效果还不错，但我认为为列表元素创建单独的组件可能是个好主意，我做了类似的事情:

List.js代码

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

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" }
];

// 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 handleClick = id => {
    console.log(id);
    setList(list.filter(item => item.id !== id));
  };

  // adding status to current element of the list
  const setElementStatus = (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}>
        <input
          type="text"
          value={value}
          onChange={handleChange}
          className="to-do-form-input"
        />
        <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}
          ></ListItem>
        ))}
      </ul>
    </div>
  );
};

export default List;

我添加了新组件，代码如下:

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

const ListItem = item => {
  return (
    <li className={"to-do-list-element " + item.status} key={item.id}>
      <span className="to-do-list-text">{item.name}</span>
      <button
        type="button"
        onClick={() => List.setElementStatus(item.id, "in-preparation")}
        className="button to-do-list-button"
      >
        In preparation
      </button>
    </li>
  );
};

export default ListItem;

问题是，如何从 ListItem.js 组件中的 List.js 组件触发函数？

Answer 1

在 List.js 代码中，您可以将函数作为 props 传递给 ListItem 组件，例如

{list.map(item => (
          <ListItem
            name={item.name}
            status={item.status}
            key={item.id}
            yourFunction={whateverFunction}
          ></ListItem>
        ))}

然后在您的ListItem中传递 Prop ，其中将包含yourFunction，然后是name、status和key. 通过说你传递了 Prop ，这意味着 ListItem 将如下所示:

const ListItem = props => {...}

您只需调用执行 props.yourFunction() 的函数即可。

或者

您可以解构您传递的 Prop ，如下所示:

const ListItem = ({yourFunction, name, status, key}) => {...}

然后立即在您的组件中使用它，无需预先添加 props(如 yourFunction())。