Saya cuba membuat komponen Makluman, apabila prop dihantar kepadanya daripada komponen induk, ia sepatutnya dipaparkan, tetapi saya mendapat ralat
Ralat Tidak Ditangkap: Objek bukan elemen React child yang sah (Found: Object with keys {message, showAlerts}. Jika anda ingin memaparkan koleksi elemen anak, gunakan tatasusunan.
Saya tidak pasti mengapa React menganggap komponen fungsi saya sebagai objek. Pautan kotak pasir kod: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054
Ini ialah komponen induk:
import styled from "styled-components"; import { useTable } from "react-table"; import Alert from "react-bootstrap/Alert"; import Button from "react-bootstrap/Button"; import axios from "axios"; import AppAlerts from "./components/Alerts"; const Styles = styled.div` padding: 1rem; table { border-spacing: 0; border: 1px solid black; tr { :last-child { td { border-bottom: 0; } } } th, td { margin: 0; padding: 0.5rem; border-bottom: 1px solid black; border-right: 1px solid black; :last-child { border-right: 0; } } } `; function Table({ columns, data }) { // Use the state and functions returned from useTable to build your UI const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }); const [showAlert, setShowAlert] = useState(false); const [alertMessage, setAlertMessage] = useState(""); const handleButttonClick = () => { setShowAlert(true); setAlertMessage("dummy text"); }; // Render the UI for table return ( {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( {column.render("Header")} ))} ))} {rows.map((row, i) => { prepareRow(row); return ( {row.cells.map((cell) => { return ( {cell.render("Cell")} ); })} ); })}
); } function App() { // const [data, setData] = useState([]); // const [columns, setColumns] = useState([]); const columns = React.useMemo( () => [ { Header: "Id", accessor: "id" }, { Header: "Applicant", accessor: "applicant" }, { Header: "Pincode", accessor: "pincode" }, { Header: "District", accessor: "district" }, { Header: "State", accessor: "state" } ], [] ); const data = React.useMemo( () => [ { id: 18, applicant: "Buzz", pincode: 560096, district: 1, state: 1 }, { id: 19, applicant: "Sue", pincode: 560100, district: 2, state: 1 } ], [] ); return (
); } export default App;
Subkomponen:
import { useEffect, useState } from "react"; import Alert from "react-bootstrap/Alert"; export default function AppAlerts(message, showAlerts) { const [show, setShow] = useState(showAlerts); return ( setShow(false)} show={show} dismissible > {message}
); }
Apa salah saya di sini dan apakah yang perlu saya ubah?
Saya cuba memaparkan komponen anak Alerts dengan cara yang saya fikir telah diterima. Komponen Amaran mesti memaparkan dan membuka kotak amaran apabila butang diklik. Apabila menutup makluman, pembolehubah keadaan dalam komponen induk yang memaparkan makluman (showAlerts) juga mesti ditukar kepada 'false'.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Terjemah ayat berikut ke dalam bahasa Cina, kekalkan kod html dan tidak perlu menambah kandungan baharu:
export default function AppAlerts(message, showAlerts) { ... }menjadi:
export default function AppAlerts({message, showAlerts}) { ... }Kerana prop sentiasa menjadi objek dan ia diluluskan sebagai parameter pertama.
Menggunakan pendakap kerinting dalam senarai parameter bermakna anda sedang memusnahkan parameter pertama (iaitu parameter props).