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

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

How to create dynamic reusable functional component in React?

html

javascript

json

reactjs

react-component