如何在 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>