Question

我正在尝试使用传播运算符来影响React组件的样式，但是它似乎不起作用...

const newProps = { ...this.props, color: 'red' };

return (
  <SU_Table.Cell {...newProps}>
    {this.props.children}
  </SU_Table.Cell>
);

有人可以告诉我是否可以通过这种方式进行更改吗？

Answer 1

如果您的<SU_Table.Cell />组件希望使用名称正常的道具（例如样式），则此方法应该有效。如果没有，您在控制台中收到任何错误消息？

// lets say "props" looks like this
{
  fontSize: 12,
  children: [],
  somethingUnrelated: '@123123sadasd',
  text: 'Cell text'
}

class Table extends Component {
  render () {
    // the spreading of this.props will be applying unRelated properties to the Object
    // const newProps = { ...this.props, style: { color: 'red' } }
    // this spreading of this.props would also put the property 'children' into your
    // newProps Object and then ultimately into your SU_Table.Cell instantiation as an
    // attribute.
    
    // only taking what you want from props is more concise and readable.
    const { fontSize, text, children } = this.props
    const style = { fontSize, color: 'red' }
    const cellProps = { text, style }
    
    return (
      <>
        <SU_Table.Cell {...cellProps}>
          {children}
        </SU_Table.Cell>
        
        //<SU_Table.Cell text="Cell text" style={{fontSize: 12, color: 'red'}}>
        //  []
        //</SU_Table.Cell>
      </>
    )
  }
}

Answer 2

我真的不确定<dir-contexts> <dir-context name="ldap-connection" url="${ldap.url}" principal="${ldap.user}"> <credential-reference clear-text="${ldap.password}"/> </dir-context> </dir-contexts>是什么。但是也许尝试一下？

SU_Table.Cell

然后您需要在const newProps = { ...this.props, color: 'red' }; return ( <SU_Table.Cell styleProps={...newProps}> {this.props.children} </SU_Table.Cell> );内的实际Node元素上使用styleProps

SU_Table.Cell

使用扩展运算符更改React组件的样式？

2 个答案: