React Programming - The Big Nerd Ranch Guide学习笔记

组件

渲染列表

const ottersArray = [
{image:Barry, name:'Barry'},
{image:Robin, name:'Robin'},
{image:Maurice, name:'Maurice'},
{image:Lesley, name:'Lesley'},
{image:Barbara, name:'Barbara'}
];

function App() {
	return (
		<div>
			<Header />
			<ul className='post-list'>
				{ottersArray.map((post) => (
					<Post
						image={post.image}
						name={post.name}
					/>
				))}
			</ul>
		</div>
	)
}

事件和useState

SelectedItem.js

function SelectedItem({image, name}) {
	return (
		<div className='selected-item'>
			<p>{name}</p>
			<img src={image} alt={name} />
		</div>
	)
}

export default SelectedItem;

Post.js

function Post({image, name, setSelectedPostName}) {
	return (
		<li className='post-component'>
		<button onClick={() => setSelectedPostName(name)}>
			<img src={image} alt={name} />
			<p className="post-name">{name} </p>
		</button>
	)
}

App.js

function App() {
	const [selectedPostName, setSelectedPostName] = useState('Barry');
	const selectedPost = ottersArray.find(otter => otter.name === selectedPostName);
	return (
		...
		<SelectedItem image={selectedPost.image} name={selectedPost.name}/>
	)
}