Question

您好我如何将Path传递给地图功能！尝试过嵌套数组，但无法获得

Navbar（父组件）：

class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nav: [{
                topic: 'Home',
                path: '/',
            },
            {
                topic: 'Bogen',
                path: '/Bogen'
            },
            ],
            topics: ['Home', 'Bogen', 'Projekt', 'Nutzer'],
            path: ['/', '/Bogen', '/Projekt', '/Nutzer'],
        }
    }
    render() {
        return (
            <div className='navbar'>
                <NavbarTopics topics={this.state.topics}
                />
            </div>
        )
    }
}

NavbarTopics（子组件）：

const NavbarTopics = (props) => (
    <ul className='ul_Ntopics'>
        {props.topics.map((topic, index) => <NavTopic topic={topic} key={index} />)}
    </ul>
)

NavTopic（子组件）：

const NavTopic = (props) => <li className='li_Ntopic'><Link className='Link_Ntopic' to=''>{props.topic}</Link></li>;

NavTopic.propTypes = {
    topic: PropTypes.string.isRequired,
}

export default NavTopic;

如何将状态路径传递给map-function，以便将其作为prop传递给NavTopic？

Answer 1

不要将主题作为道具传递，而是传递导航。

//Navbar
<NavbarTopics nav={this.state.nav}

然后遍历导航数组

// NavbarTopics
const NavbarTopics = (props) => (
  <ul className='ul_Ntopics'>
    {props.nav.map((nav, index) => <NavTopic nav={nav} key={index} />)}
  </ul>
)

在NavTopic中，

const NavTopic = (props) => <li className='li_Ntopic'>
 <Link className='Link_Ntopic' to={props.nav.path}>{props.nav.topic}</Link>
</li>;

2道具传递给具有地图功能的子组件

1 个答案: