react创建子组件的两种方式

2021-11-17 84 阅读1分钟

import React from 'react';
import '../heard/Heard.css'

ES6 class 来定义一个组件:

let arry = []
export default class Come extends React.Component {
    constructor(props) {
        super(props);
        arry = props.list.map((item, i) => <li key={i}>{item}</li>)
    }
    render() {
        return <div>
            <h1 className="colo">Hello World!</h1>
            <ul>
                {arry}
            </ul>
        </div>;
    }
}

函数定义一个组件：

export default function Come(props) {
    console.log(props)
    return <div>
        <h1>{props.title}</h1>
        <ul>
            {props.list.map((item,i)=><li key={i}>{item}</li>)}
        </ul>
    </div>
}