React 你好世界组件

示例

可以将React组件定义为扩展基React.Component类的ES6类。组件必须以其最小形式定义一个render方法，该方法指定该组件如何呈现给DOM。该render方法返回React节点，可以使用JSX语法将其定义为类似HTML的标签。以下示例显示了如何定义最小组件：

import React from 'react'

class HelloWorld extendsReact.Component{
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

组件也可以接收props。这些是其父级传递的属性，用于指定组件本身无法知道的一些值。属性还可以包含一个函数，该组件可以在某些事件发生后由组件调用-例如，按钮可以接收其onClick属性的函数，并在单击该按钮时调用它。编写组件时，props可以通过propsComponent本身上的对象来访问它：

import React from 'react'

class Hello extendsReact.Component{
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

上面的示例显示了组件如何呈现name其父级传递到prop中的任意字符串。请注意，组件无法修改其收到的道具。

组件可以在任何其他组件中呈现，或者如果是最顶层的组件，则可以直接呈现到DOM中，使用ReactDOM.render并向其提供要呈现React树的组件和DOM节点：

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

现在，您已经知道如何制作基本组件并接受props。让我们更进一步并介绍state。

为了演示起见，让我们制作Hello World应用程序，如果给出了全名，则仅显示名字。

import React from 'react'

class Hello extendsReact.Component{

    constructor(props){

        //由于我们要扩展默认构造函数，
        //首先处理默认活动。
        super(props);

        //从道具中提取名字
        let firstName = this.props.name.split(" ")[0];
        
        //在构造函数中，随时修改
        //当前上下文的state属性。
       this.state= {
            name: firstName
        }

    } //看起来不错，在基于JSX的类def中不需要逗号！

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

注意：每个组件都可以具有自己的状态，也可以接受其父级的状态作为道具。

Codepen链接到示例。