react.js 中对props 的理解-优快云博客

本文介绍了React中组件间Props的传递机制，展示了如何通过Props在不同组件间传递数据，包括颜色、标题等属性，并提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-----------------开始---------------------

1. 每个组件都是一个对象；

2.props是对象的一个属性；

3.组件对象可以通过props传递；

----------------代码截图说明------------------------

01. 代码

//组件01
function FancyBorder(props){
    console.log(props)
    return(
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    )
}
//组件02
function Dialog(props) {
    console.log(props)
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}
//组件03
function WelcomDialog(){

    return (
        <Dialog title="测试" message="我知道结果"/>
    )
}