组件与props

创建组件

1. 函数式创建函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. ES6语法创建类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }

将组件渲染至页面

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

React约定，组件名称使用大写开头，如<Welcome /> 表示组件 <div/>则表示HTML标签

组件中使用组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

props不可改变

function Welcome(props){
    props.name = 'JAVA';
    return <h1>Hello {props.name}</h1>
}

const element = <Welcome name="react"/>
ReactDOM.render(element, document.getElementById('root'));

以上代码试图改变props的值，但编译的时候报错了

image.png

props传值

1. 通过引号传值（传递的值只能作为字符串）

function Welcome(props){
    return <h1>Hello {1 + props.num}</h1>
}
const element = <Welcome num="1"/>
ReactDOM.render(element, document.getElementById('root'));

image.png

2. 通过{}方式传值，将保留值原来的类型

function Welcome(props){
    return <h1>Hello {1 + props.num}</h1>
}
const element = <Welcome num={1}/>
ReactDOM.render(element, document.getElementById('root'));

image.png