React：Rendering Adjacent JSX Element

JSX中每次render return中内容都要被包在一个tag中

<div className={classes.Person}> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this.props.children}</p> <input type="text" onChange={this.props.changed} value={this.props.name}/> </div>

因为jsx的return会被编译为React.createElement()； 若有多个tag，则return后面跟着多个React.createElement()表达式，为错误句式；

方法一： 返回一个array：

[<h1></h1>,<p></p>]

方法二：包在AUX中 Aux.js

import React from 'react'; const aux = props => props.children; export default aux;

return——JSX

<Aux> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this.props.children}</p> <input type="text" onChange={this.props.changed} value={this.props.name}/> </Aux>

React自带的AUX——Fragment

<React.Fragment> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this.props.children}</p> <input type="text" onChange={this.props.changed} value={this.props.name}/> </React.Fragment>

或

import React, { Component, Fragment} from 'react'; <Fragment> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this.props.children}</p> <input type="text" onChange={this.props.changed} value={this.props.name}/> </Fragment>

HOC

WithClass.js

import React from 'react'; const withClass = props=>( <div className={props.classes}> {props.children} </div> ); export default withClass;

return ——JSX

<WithClass classes={Cssclasses.App}> <button onClick={()=>{this.setState({showCp:false});}}>Remove Cockpit</button> {this.state.showCp ? <Cockpit title={this.props.appTitle} showPersons={this.isshow} personsLength={this.state.persons.length} clicked={this.clicktoshow}/> :null} {person} </WithClass>

Another Form of HOC

WithClass——函数 传入被包裹的jsx，和类名；

import React from 'react'; const withClass = (WrappedComponent, className)=>{ return props =>( <div className={className}> <WrappedComponent/> </div> ); }; export default withClass;

App.js return——用aux包裹

<Auxiliary> <button onClick={()=>{this.setState({showCp:false});}}>Remove Cockpit</button> {this.state.showCp ? <Cockpit title={this.props.appTitle} showPersons={this.isshow} personsLength={this.state.persons.length} clicked={this.clicktoshow}/> :null} {person} </Auxiliary>

export App类即为return的jsx，赋予相应的类名；

export default withClass(App,Cssclasses.App);

Passing Unknow Props

import React, { Component } from 'react'; // import './Person.css'; import classes from './person.module.css'; import withClass from '../../../hoc/WithClass'; import Aux from '../../../hoc/Auxiliary'; class Person extends Component{ render(){ console.log('person redering') return( // <div className="Person" style={style}> // <div className={classes.Person}> <React.Fragment> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this.props.children}</p> <input type="text" onChange={this.props.changed} value={this.props.name}/> </React.Fragment> // </div> ) } }; export default withClass(Person,classes.Person);

其中Person的props并未在withClass中调用，需要在withClass中传入props:

import React from 'react'; const withClass = (WrappedComponent, className)=>{ return props =>( <div className={className}> <WrappedComponent {...props} /> </div> ); }; export default withClass;