props函数的作用是什么？React内联样式代码问题求助

一、props函数的核心作用 #

你代码里的(props) => ...箭头函数，核心作用就是接收组件被调用时传入的props参数，让你能根据外部传入的属性动态生成样式。简单说就是把组件外面传进来的值，拿到样式里复用，实现样式跟着props变化的动态效果。

二、结合你的代码具体说明 #

1. 针对background-color: #${(props) => props.bg};
   当你使用组件时传入bg属性（比如<YourComponent bg="2ecc71" />），这个函数会把props.bg的值取出来，最终样式就会变成background-color: #2ecc71，实现背景色的动态设置。

2. 针对left: ${(props) => props.direction === 'left' && '10px'};
   这段代码是判断组件传入的direction是否为left：

• 如果是，就返回10px，样式最终是left: 10px；
• 如果不是，&&运算符会返回false，React会自动忽略样式对象里的false值，所以left属性不会生效。

三、小优化建议 #

如果需要在direction不是left时设置默认值，可以把代码改成三元表达式，避免样式出现不确定的情况：

left: ${(props) => props.direction === 'left' ? '10px' : '0'};

内容的提问来源于stack exchange，提问作者LEO World