React を使用して、子コンポーネントから親コンポーネントに id パラメーターを持つ関数を渡すことは可能ですか? 関数をプロパティとして親コンポーネントに渡そうとしています。 コンポーネント ソリューションは、アプリ コンポーネント -> TasksList コンポーネント -> タスク コンポーネントです。したがって、特定のタスクをクリックしてそのタスクにルーティングし、その個別の ID を使用する必要があります。 重要なのは、URL がクリックされてタスクにルーティングされると、/task/009 に変更されますが、タスク コンポーネントはレンダリングされないということです。

https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js

//アプリコンポーネント
const タスク = [
  {
    ID: "001"、
    ステータス: 0、
    優先度: 2、
    タイトル: "Web サイトのホームページの開発",
    説明：
      「Web サイトの視覚的に魅力的で応答性の高いホームページを作成する」、
    スケジュール： {
      作成時刻: "2021-07-23T10:00:00"
    }、
    著者名: "ジョン・スミス"
  }、
  {
    ID: "002"、
    ステータス: 1、
    優先度: 1、
    title: "ユーザー認証を実装する",
    説明: "Web サイトにユーザー認証機能を追加します",
    スケジュール： {
      作成時刻: "2021-07-24T14:30:00"
    }、
    著者名: 「サラ・リー」
  }
  】
  
  関数 App() {
  const [タスク, setTasks] = useState(タスク);
  戻る （
  
    <ルートパス="/タスクリスト">
      <タスクリスト Tasks={tasks} />
    </ルート>
  )

// 親コンポーネント
「反応」から React をインポートします。

const タスクリスト = ({ タスク }) => {
  const 履歴 = useHistory();

  const goToTask = (taskId) => {
    History.push(`/task/${taskId}`);
  };

  戻る （
    <タスク
      Tasks={Tasks.filter((task) =>task.status === 0)}
      goToTask={goToTask}
    />
}

//子コンポーネント

「反応」から React をインポートします。

const Task = ({ Tasks, goToTask }) => {
  戻る （
    <div className="ラッパー">
      {Tasks.map((タスク) => (
        <div key={task.id} onClick={goToTask(task.id)}>
          <h3>{タスク.タイトル}</h3>
        </div>
      ))}
    </div>
  );
};

デフォルトのタスクをエクスポート;