Question

在React的渲染方法中，如果我循环遍历数组并渲染结果元素，我如何使用预定义的style对象以及依赖于参数的样式在渲染组件时在map回调中提供了什么？

class Example extends React.Component {
  render() {

    const otherStyles = {
      height: '20px',
      backgroundColor: 'blue'
    }

    return (
      {this.props.items.map((d, i) => {
        return (
           // also include otherStyles
           <div style={{width: i * 10 + '%'}}></div>
        )
      }}
    )
  }
}

我希望避免将所有样式内联作为返回值，而是仅声明那些依赖于map回调中的参数的样式。

在循环中渲染组件时，是否可以将其他样式对象与内联样式结合使用？

Answer 1

ES6有两个不错的选择。正如Dayan提到的Object.assign或者您可以使用对象解构，也可以使用ES6功能。

const otherStyles = {
  height: '20px',
  backgroundColor: 'blue'
}

const inlineStyle = {
  width: '10%'
}

const deconstructed = {...otherStyles, ...inlineStyle}
const assign = Object.assign(otherStyles, inlineStyle)

两者都导致：

{
  height: '20px',
  backgroundColor: 'blue',
  width: '10%'  
}

更具体地说，我将两个选项放在下面的渲染方法中：

class Example extends React.Component {
  render() {

    const otherStyles = {
      height: '20px',
      backgroundColor: 'blue'
    }

    return (
      {this.props.items.map((d, i) => {
        return (
           // also include otherStyles with destructuring
           <div style={{width: i * 10 + '%', ...otherStyles}}></div>
        )
      }}
      {this.props.items.map((d, i) => {
        return (
           // also include otherStyles with Object.assign
           <div style={Object.assign(otherStyles, {width: i * 10 + '%'}}></div>
        )
      }}
    )
  }
}

渲染内联样式以及React Component的预定义样式

1 个答案: