import React from "react";import 'bootstrap/dist/css/bootstrap.min.css'const infoMap = { formTitle: "用户登录", userName: '用户名：', passwd: '密码(*)：', submitValue: '登录', args1Begin: '传的参数props是 “', args1End: '”。', args2: '没有传参。', nameLs: '李四', defaultInfo: '使用this传入的默认（缺省）参数值为“', nameWw: '王五', nameZs: '张三', part1Title: '组件组合的简单示例', part2Title: '组件传参props的简单示例', part3Title: '组件只读参数（默认值，无法修改）的简单示例', part4Title: '类组件参数默认（缺省）值的简单示例',}// 无参组件function FormTitle(){ return <h4Name="h4 mb-3 font-weight-normal">{infoMap.formTitle}</h4>;}function InputComponent(){ return ( <divName="form-label-group"> <input type="text"Name="form-control"/> </div> );}function UserName() { return ( <span> <div>{infoMap.userName}</div> <InputComponent /> </span> ); }function Password(){ return ( <span> <div>{infoMap.passwd}</div> <InputComponent /> </span> );}function Submit() { return ( <p><buttonName="btn btn-lg btn-primary btn-block my-2">{infoMap.submitValue}</button></p> );}// 有参组件function PropsReactComponent(props){ if (props){ return <p>{infoMap.args1Begin} {props.name} {infoMap.args1End}</p>; } else { return <p>{infoMap.args2}</p>; } }// 无参组件的组合function FormLogin(){ return ( <formName="form-signin" id="id-div-formlogin"> <FormTitle /> <UserName /> <Password /> <Submit /> </form> );}function UserName2(props){ return ( <span> <div>{infoMap.userName}</div> <divName="form-label-group"> <input type="text"Name="form-control" value={props.userName} onChange={()=>{}}/> </div> </span> );}// 有参组件的组合function FormLogin2(){ return ( <formName="form-signin" id="id-div-formlogin2"> <FormTitle /> <UserName2 userName={infoMap.nameWw} /> <Password /> <Submit/> </form> );}// 使用默认值作为参数class PropsReactComponent2 extends React.Component { render() { return <p>{infoMap.defaultInfo} {this.props.default} {infoMap.args1End}</p>; }}PropsReactComponent2.defaultProps = { default: infoMap.nameLs};// 声明创建一个无参的组合组件实例const formLogin = <FormLogin />;// 声明创建一个组件实例，并传递参数const elementProps = <PropsReactComponent name={infoMap.nameZs} />;// 声明创建一个有参的组合组件实例，并传递参数const formlogin2 = <FormLogin2/>const elementProps2 = <PropsReactComponent2/>;const ComponentComposing = () => { return ( <span> <h3>{infoMap.part1Title}</h3> {formLogin} <hr/> <h3>{infoMap.part2Title}</h3> {elementProps} <hr/> <h3>{infoMap.part3Title}</h3> {formlogin2} <hr/> <h3>{infoMap.part4Title}</h3> {elementProps2} </span> );};export default ComponentComposing;

运行效果：