如何在 React js 中通过道具传递内联样式？答案

【问题标题】：How to pass inline style with props in react js?如何在 React js 中通过道具传递内联样式？
【发布时间】：2020-08-26 23:34:55
【问题描述】：

我想通过这样的道具传递内联样式：

<P style={{marginTop : '20px'}}>{price}</P>

import React from 'react';

function P(props) {
    return <p style={{ width: '100%', textAlign: 'right', fontSize: '1.3em' ,{props.style} }}>{props.children}</p>;
}

export default P;

但它会在终端提示：

Unexpected token, expected , (4:74)
  2 | 
  3 | function P(props) {
> 4 |   return <p style={{ width: '100%', textAlign: 'right', fontSize: '1.3em' {props.style} }}>{props.children}</p>;
    |                                                                           ^
  5 | }
  6 | 
  7 | export default P;

如何将带有 props 的内联样式传递给 react js 中的另一个组件？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

你应该做的是，发送margin-top的确切值，而不是css代码，像这样

<P marginT='20px'>{price}</P>

并像这样使用它：

<p style={{ marginTop: this.props.marginT }}>{props.children}</p>;

【讨论】：

【解决方案2】：

你应该像这样传递样式道具：

function P(props) {
    return <p style={{ width: '100%', textAlign: 'right', fontSize:'1.3em',...props.style  }}>
      {props.children}</p>;
}

【讨论】：