reactjs - 面包屑 react 代码不起作用，我该如何修复它？

Question

因此，我尝试设置一个为 React 创建面包屑的组件。

代码在这里:

https://codesandbox.io/s/dreamy-microservice-mjxg2?fontsize=14

它带回来的错误是我对 props.children.map 处理不当，你们中的任何人都可以告诉我原因或如何修复它吗？

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Breadcrumb = ({props}) => {
  const list = props.children.map((item) => (<li>{item}</li>));
  return (
    <ul>{list}</ul>

}:

const BreadcrumbItem = ({href, name}) => <div>{name}</div>;

function App() {
  return (
    <div className="App">
     <Breadcrumb>
      <BreadcrumbItem 
          href="/dashboard"
          name="Dashboard"
      />
      <BreadcrumbItem 
          href="/brand"
          name="Brands"
      />
      <Breadcrumb 
          href="/brand/new"
          name="New brands"
      />
  </Breadcrumb>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

更改此:

const Breadcrumb = ({props}) => 

与

const Breadcrumb = (props) =>

此外，应用程序组件中存在拼写错误。最后一个子项是 Breadcrumb，它应该是 BreadcrumbItem。

---

工作代码如下:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Breadcrumb = (props ) => {
  const list = props.children.map(item => <li>{item}</li>);
  return <ul>{list}</ul>;
};

const BreadcrumbItem = ({ href, name }) => <div>{name}</div>;

function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <BreadcrumbItem href="/dashboard" name="Dashboard" />
        <BreadcrumbItem href="/brand" name="Brands" />
        <BreadcrumbItem href="/brand/new" name="New brands" />
      </Breadcrumb>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);