react 中使用 bootstrap:
安装: npm install bootstrap --save
引入: import 'bootstrap/dist/css/bootstrap.min.css'; (在index.js中引入)
NameCard 组件:
NameCard.js
import React from 'react'; class NameCard extends React.Component{ render() { const {name, tel, isHuman, tags} = this.props; return( <div> <h4>{ name }</h4> <p>电话:{ tel }</p> <p>{ isHuman ? 'human' : "外星生物"}</p> <p> { tags.map((item, index) => <span key={index}>{item}</span> ) } </p> </div> ) } } export default NameCard
组件使用:
app.js
import NameCard from './component/NameCard' const tags = ['tag1', 'tag2', 'tag3']; const isHuman = true; function App() { return ( <div className="App"> <header className="App-header"> <NameCard name="TOMM" tel="17864299768" isHuman={isHuman} tags={tags} /> </header> </div> ); } export default App;
或者这样写:
const NameCard = (props) => {
const {name, tel, isHuman, tags} = props;
return(
<div>
<h4>{ name }</h4>
<p>电话:{ tel }</p>
<p>{ isHuman ? 'human' : "外星生物"}</p>
<p>
{
tags.map((item, index) =>
<span key={index}>{item}</span>
)
}
</p>
</div>
)
}