子コンポーネントは、id パラメーターを含む関数を親コンポーネントに渡すことができますか?

Question

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>
  );
};

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

Answer 1

複数の質問

1. この行は私が最初の問題を見ることができた場所です。 すぐに goToTask を呼び出しています。

2. アプリケーション コンポーネントでは、個々のタスク ルートのタスク コンポーネントをレンダリングしません。この問題を解決するには、次のように、アプリケーション コンポーネントで単一のタスクのルートを定義し、そのルートのタスク コンポーネントをレンダリングします。

関数 App() {
  const [タスク, setTasks] = useState(タスク);

  戻る （
    
      
        
          
        
        
          
        
      
    
  );
}

3. Task コンポーネントでは、選択したタスクが URL からフィルターされていることを確認する必要があります。 useParams() を使用する

import { useParams } from "react-router"; const タスク = ({ タスク }) => { const { id } = useParams(); const task = Tasks.find((task) => task.id === id); 戻る （

      
{タスク.タイトル}

      
{タスクの説明}

      {/* ... */}
    
  );
};

さらにサポートが必要な場合はお知らせください。