刚刚完成我的 Codecademy React 类(class),但我对样式等一些概念仍然有些模糊。
通常,如果我必须在 css 中设置列表样式,它看起来像:
li {
text-decoration: none,
color: 'white'
}
现在,如果我在 HTML 工作表之外编写它,而不是通过 JSX,我知道我可以将样式分配给变量,例如:
var linkStyle = {
textDecoration: 'none',
color: 'white'
}
并将其应用于我的元素,例如:
<li style={listStyle}>Home</li>
但是,当我在列表中有多个元素并且需要对所有元素应用相同的样式时,这似乎有点多余,如下所示:
render: function() {
return (
<div style={divStyle}>
<ul>
<li style={listStyle}><a href='#' style={linkStyle}>Home</a></li>
<li style={listStyle}><a href='#' style={linkStyle}>About Us</a></li>
<li style={listStyle}><a href='#' style={linkStyle}>Contact Us</a></li>
<li style={listStyle}><a href='#' style={linkStyle}>Library</a></li>
</ul>
</div>
);
}
我如何避免这种情况并以 DRY 思维方式应用样式?
最佳答案
如果你只想使用内联样式
,你可以把内容做成一个数组,然后在它上面调用一个map
render: function() {
return (
<div style={divStyle}>
<ul>
{
['Home', 'About us', 'Contact Us', 'Library']
.map((el) =>
<li style={listStyle}>
<a href='#' style={linkStyle}>{el}</a>
</li>
)
}
</ul>
</div>
);
}
关于javascript - 如何在 React.js 中编辑多个元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40229998/