javascript - 2 使用 Map 函数传递给子组件的道具

Question

嗨，我怎样才能将路径传递给地图功能！已尝试作为嵌套数组但无法获取

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;

如何将状态路径传递给地图函数，以便将其作为道具传递给 NavTopic？

标签： javascriptreactjsecmascript-6higher-order-functions

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