React官网学习实践 - 组件&Props

组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

组件的定义方式：

1.函数定义

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

2. 类定义

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

组件的渲染（使用方式）

1. 函数形式的渲染

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

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

2. 类形式的渲染

class App extends Component {
    render() {
    return (
        <div>

            <Welcome2 name="World" />
        </div>
    );
  }
}

测试：

code:

import React, { Component } from 'react';
import './App.css';

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

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

const welcome1TestParameter = {
    name: 'Welcome1'
}
class App extends Component {
    render() {
    return (
        <div>
            {Welcome1(welcome1TestParameter)}

            <Welcome2 name="Welcome2" />
        </div>
    );
  }
}

export default App;