Question

刚刚完成了我的Codecademy反应课程，而且我对造型等一些概念仍然有些模糊。

通常情况下，如果我必须在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>
        );
    }

如何避免这种情况并以干燥的思维方式应用这些风格？

Answer 1

如果您只想使用inline styles，则可以将内容设为数组，并在其上调用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>
        );
    }

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

1 个答案: