面包屑反应代码不起作用，我该如何解决？

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) =>

此外，App组件中有一个错字。最后一个孩子是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);