react-jsx

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>
    )
}