如何在 React 中创建动态可重用的功能组件？

Question

我想创建一个动态的可重用组件。 我知道它可以在类似道具的帮助下完成：

const Sidebar = (props)=>{
return(
<div className="sidebar">
<ul>
<li>{props.list1}</li>
<li>{props.list1}</li>
<li>{props.list1}</li>
<li>{props.list1}</li>
...
</ul>
</div>
)
}

这里有一个问题。 我不知道有多少<li>会出现在侧边栏中。 在某些情况下，侧边栏可大可小。 当我使用上述方法（在props的帮助下）创建动态组件时，我必须有固定数量的列表项。 如何使用动态数据以及<li>标签的动态数量创建可重用组件？

Answer 1

使用.map遍历数组并将其呈现为列表。

请参阅： https : //reactjs.org/docs/lists-and-keys.html

 const Sidebar = (props)=>{ const sidebarItems = props.list1.map(i => <li>{i}</li>); return( <div className="sidebar"> <ul> {sidebarItems} </ul> </div> ) } ReactDOM.render(<Sidebar list1={["first", "second", "third", "fourth"]}/>, document.getElementById('sidebar')); ReactDOM.render(<Sidebar list1={["onlyOne"]}/>, document.getElementById('smaller'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="sidebar"></div> <div id="smaller"></div>