之前我们所定义的组件内容几乎都是固定的，组件创建的时候什么样，使用时就是什么样。但在开发时，我们往往需要的是一些动态显示的组件，换句话组件中所显示的内容必须是动态设置的。
在使用组件时，可以通过向组件传递参数的形式来向组件传递数据，这一点和JS中的函数非常相似。函数可以通过传递实参来决定函数的执行结果，组件也不例外。函数的参数如何传递我们是非常清楚的，那么组件的参数是怎么传递的呢？组件的参数需要通过属性传递，可以像这样向组件中传递参数：
<Button bgColor='red' color='white'>我是一个按钮</Button>
上边的案例中我们设置了两个属性，这些属性会被封装到一个对象中并作为参数传递给Button组件，只需要在Button组件中定义一个参数即可获取，通常这个参数我们会命名为props，像这样：
import './Button.css';
const Button = (props) => {
return <button style={{backgroundColor:props.bgColor, color:props.color}}>{props.children}</button>;
};
export default Button;
在组件内部可以通过props.xxx来访问外部传递进的属性，从而达到动态设置的目的。需要注意的是，标签体也可以设置为props的一个属性，叫做children，可以通过props.children来获取标签体的内容。
还有一点一定要记住，props中的属性是只读属性是无法修改的！
