0

react.js 组件创建时如何设置样式？

下面是我的一些代码（部分继承自更强大的开发人员，然后为简洁起见进行了简化）。

我想重新使用我的 LogComponent 来打印几页日志。但是，在某些情况下，我想在返回的列表上强制一个特定的宽度，而不是让它在它认为合适的时候弯曲。

我宁愿不定义单独的 LogComponentFixed 或if (...) {return (...)} else {return(...)}在我的 LogComponent 中有一个。

我想在 Log.js 中做一些事情，比如：

<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_1} />
<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_2} />

然后，在 LogComponent 中执行以下操作：

<List style={style}> ... </List>

我也尝试使用类似的东西

<List className={list_1}> ... </List>

但是我尝试过的所有方法都不起作用...

日志.js

import React from 'react'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import LogComponent from './LogComponent'

const styles = theme => ({
  title: {
    padding: theme.spacing.unit*1.5,
  },
  list_1: {
  },
  list_2: {
    width: "300px"
  },
  listContainer: {
    flexGrow: 1,
    minHeight: 0,
    overflow: 'auto'
  },
})

const Log = ({classes, log}) => {
  const page_1 = log[0];
  const page_2 = log[1];
  return (
    <div>
      <Typography className={classes.title} color="textSecondary" key={1}>
        Example Log
      </Typography>
      <div className={classes.listContainer} key={2}>
        <LogComponent heading={'Page 1'} lines={page_1} />
        <LogComponent heading={'Page 2'} lines={page_2} />
      </div>
    </div>

export default withStyles(styles)(Log)

日志组件.js

import React from 'react'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import { List, ListItem, ListItemText } from '@material-ui/core';

const styles = theme => ({
  title: {
    padding: theme.spacing.unit*1.5,
  },
}

const LogComponent = ({classes, list_class, heading, lines}) => {

    return (
    <div className={classes.root}>
    <Typography className={classes.title} color="textSecondary" key={1}>
            {heading}
            </Typography>
            <div>
            <List dense>
                {[...lines[0]].map(e => 
                <ListItem><ListItemText primary={e} /></ListItem>
                )}
            </List>
            </div>                    
    </div>
    )
}

export default withStyles(styles)(LogComponent)
4

1 回答 1

1

在这里，您将样式作为propto发送LogComponent，这就是为什么它不会作为样式应用于您创建的组件的原因。style 属性用于 HTML 标签，在 material-ui 中，您也可以将样式传递给包装器组件。

在您的情况下，您可以获得如下样式LogComponent：

如您在问题中提到的，将样式作为道具发送

<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_1} />

现在，您可以从道具访问它，

                                                   // right below get the style
const LogComponent = ({classes, list_class, heading, lines, style}) => {

return (
<div className={classes.root} style={style}> // Look style attribute added, style(value) is from props
<Typography className={classes.title} color="textSecondary" key={1}>
     {heading}
     </Typography>
     <div>
     <List dense>
          {[...lines[0]].map(e => 
                <ListItem><ListItemText primary={e} /></ListItem>
           )}
      </List>
      </div>                    
    </div>
    )
}
于 2018-07-25T14:09:26.207 回答