javascript - 如何在 React.js 中编辑多个元素的样式

Question

刚刚完成我的 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 思维方式应用样式？

Answer 1

如果你只想使用内联样式，你可以把内容做成一个数组，然后在它上面调用一个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>
        );
    }