html 反应16.2碎片

Posted 2021-05-10

section {
	max-width: 300px;
	text-align: center;
}
h3 {
	margin-bottom: 0;
}

h3 + p {
	margin-top: 2px;
	padding-top: 0.25em;
	border-top: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/react.min.js"></script>

const Fragment = React.Fragment;
const Component = React.Component;

// just some test data
const userFields = [
	{
		id: 1,
		name: 'Joe Smith',
		job: 'accountant',
	},
	{
		id: 2,
		name: 'George Trang',
		job: 'designer'
	},
	{
		id: 3,
		name: 'Anne Trailway',
		job: 'accountant'
	}
];
	
class PageClass extends Component {
	
	// notice how we wrap the elements
	// in a fragment instead of adding
	// yet another DOM element
	static userType( user ) {
		return (
			<Fragment>
				<h3>{user.name}</h3>
				<p>{user.job}</p>
			</Fragment>
			);
	}
	
	render() {
		const { fields } = this.props;
		
		// example here to show you can 
		// give each fragment a key but
		// not anything else like className
		return (
			<section>
					{fields.map( f => (
						<Fragment key={f.id}>
								{PageClass.userType(f)}
						</Fragment>
					))}
			</section>
		)
	}
}

const root = document.getElementById( 'root' );
ReactDOM.render( <PageClass fields={userFields} />, root );

React 16.2 Fragments
--------------------
New feature in React 16.2 called Fragments that allow you to return DOM elements without the usual <div> </div>

A [Pen](https://codepen.io/Jeff518Code/pen/GdjbYQ) by [Jeff](https://codepen.io/Jeff518Code) on [CodePen](https://codepen.io).

[License](https://codepen.io/Jeff518Code/pen/GdjbYQ/license).

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>