在内联样式上传递 props.color - React

Question

我正在尝试将颜色传递给我的文本，但它不适用。如果我更改为 Card.props.color，它可以工作，但永远不会读取参数 props。

const Card = (props) => {
    return (
        <div>
           <p style={{color: props.color}}>Random text</p> 
        </div>
    )
}

Card.props = {
    color: 'blue'
}


export default Card

Answer 1

你不应该写这段代码，因为这会改变反应使用的道具对象。

Card.props = {color : 'blue'}

为了正确使用，道具会在您将使用 Card 组件的地方传递

<Card color=  {"blue"} />

Answer 2

可以设置默认道具

const Card = (props) => {
    return (
        <div>
           <p style={{color: props.color}}>Random text</p> 
        </div>
    )
}

Card.defaultProps = {
    color: 'blue'
}


export default Card

Answer 3

您可以将默认属性值分配给 defaultProps property or even better take advantage of the default function parameters，因为您的组件是一个函数。

const Card = ({ color = 'blue' }) => {
  return (
    <div>
      <p style={{ color }}>Random text</p> 
    </div>
  )
}

export default Card;

在内联样式上传递 props.color - React

Passing props.color on inline style - React

javascript

reactjs