如何在react js中通过props传递内联样式？

Question

Answer 1

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

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

并像这样使用它：

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

Answer 2

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

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

Answer 3

你可以做这样的事情

<P style='{ "width": "100%", "textAlign": "right", "fontSize": "1.3em"}' price="10"></P>

并在函数中使用它，如下所示

function P(props: {style: any; price: string}) {
    return <p style={{...JSON.parse(props.style)}}>{Number(props.price)}</p>;
}

注意style props 中的属性应该有“”，否则 JSON.parse() 函数将无法工作。