组件与props

创建组件

1. 函数式创建函数组件

function Welcome(props) {
  return 
Hello, {props.name}
;
}

2. ES6语法创建类组件

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

将组件渲染至页面

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

React约定，组件名称使用大写开头，如 表示组件

则表示HTML标签

组件中使用组件

function Welcome(props) {
  return 
Hello, {props.name}
;
}

function App() {
  return (
    

      
      
      
    
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

props不可改变

function Welcome(props){
    props.name = 'JAVA';
    return 
Hello {props.name}
}

const element = 
ReactDOM.render(element, document.getElementById('root'));

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

image.png

props传值

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

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

image.png

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

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

image.png