大佬教程收集整理的这篇文章主要介绍了有没有更好的编码方式？ （初学者）React.js，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这就是我学到的如何用列表映射数组。我想知道是否有更好的方法通过保持干燥来改善这一点。
我知道我可以用对象创建单个数组，但是，它用于页面上的 3 个不同列。
如果我以后要进行更改并维护列表，这是否足够？
return Ok(new
{
token = "",user = new
{
Username = "",UserRole = ""
}
});
我会把列表变成一个对象，把不同的列表变成键。这样，列表将很容易添加，因为它们是数组，您可以根据需要将列表类型添加为对象的键。
const lists = {
dairy: ["Eggs","Milk","Cheese"],buy: ["Soap","Garbage Bags"],tools: ["Plywood","Nails"]
};
就填充列而言……列表项周围应该只有 1 个 <ul>，因此这应该在 map 方法之外。要干的话，你可以做一个这样的方法：
const populateListItems = (list) => {
return list.map((listItem) => (
<li>{listItem}</li>
))
};
然后使用它来填充您的列列表项，如下所示：
<div class="col-1">
{list.dairy.length && (
<ul>
{populateListItems(list.dairy)}
</ul>
)}
</div>
<div class="col-2">
{list.buy.length && (
<ul>
{populateListItems(list.buy)}
</ul>
)}
</div>
<div class="col-3">
{list.tools.length && (
<ul>
{populateListItems(list.tools)}
</ul>
)}
</div>
为了使这段代码更加简洁，您可以使用 Object.keys 根据“列表”对象中有多少列表键来创建任意数量的列。这将返回与上面相同的内容。
Object.keys(list).map((key,index) => (
<div class=`col-${index}`>
<ul>
{populateListItems(list[key])}
</ul>
</div>
));
我会从 React-Native 的 FlatList 组件中得到启发。您至少需要一个组件，该组件可以使用 renderItem 函数呈现一组项目，并且可以设置映射的键。
const FlatList = ({
data = [],renderItem,getKey = (_,i) => i // <-- return array index by default
}) =>
data.map((el,index) => (
<React.Fragment key={getKey(el,index)}>
{renderItem(el,index)}
</React.Fragment>
));
const groceryList = [{ Dairy: "Eggs" },{ Dairy: "Milk" },{ Dairy: "Cheese" }];
const shoppingList = [{ toBuy: "Soap" },{ toBuy: "Garbage bags" }];
const getHomeDepot = [{ getTools: "Plywood" },{ getTools: "Nails" }];
const primitives = ['Bill','Ted','Socrates'];
const FlatList = ({ data = [],i) => i }) =>
data.map((el,index)}
</React.Fragment>
));
function App() {
return (
<div>
<FlatList
data={groceryList}
renderItem={(el) => <div>{el.Dairy}</div>}
/>
<ul>
<FlatList
data={shoppingList}
renderItem={(el) => <li>{el.toBuy}</li>}
/>
</ul>
<ol>
<FlatList
data={getHomeDepot}
getKey={(el,i) => el.getTools}
renderItem={(el) => <li>{el.getTools}</li>}
/>
</ol>
<ul>
<FlatList
data={primitives}
renderItem={(name,i) => <li>{i} : {name}</li>}
/>
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,rootElement
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/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="root"></div>以上是大佬教程为你收集整理的有没有更好的编码方式？ （初学者）React.js全部内容，希望文章能够帮你解决有没有更好的编码方式？ （初学者）React.js所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。