Javascript 如何在React.js中编辑多元素的样式

我刚刚完成了我的codecademyreact课程，对于一些概念，比如样式，我还是有点模糊

通常，如果我必须用css设置列表的样式，它将如下所示：

li {
    text-decoration: none,
    color: 'white'
}

现在，如果我是在HTML工作表之外编写的，而是通过JSX编写的，我知道我可以将样式分配给一个变量，如：

var linkStyle = {
    textDecoration: 'none',
    color: 'white'
}

并将其应用于我的元素，如：

<li style={listStyle}>Home</li>

Home

但是，当列表中有多个项目并且需要对所有项目应用相同的样式时，这似乎有点多余，如下所示：

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>
        );
    }  

render:function（）{
返回(






);
}  

---

如何避免这种情况，并以干巴巴的方式应用样式？

如果您只想使用

内联样式

，您可以将内容设置为数组，并在其上调用

映射

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>
        );
    } 

render:function（）{
返回(

{
[“家”、“关于我们”、“联系我们”、“图书馆”]
.map（（el）=>


)
}

);
} 
使用
类名和添加css样式表有什么不对？为什么不将链接存储为数组
['Home'、'About Us'、'Contact Us'].map（x=>
{x}
）
我猜这是真的。我试图从简单的HTML表单中创建一个页面，希望没有CSS样式表——试图将所有内容都放在我的React文件中。编辑：实际上，阵列的想法可能会更好。非常感谢。