Components 与 Props（Day4）

当我们会写基本的 Hello World 之後，就可以开始考虑扩展跟重组我们要撰写的程序码了。我们会把一段与其他程序码基本上相异的，而内部彼此有关联的程序码，写成所谓的元件（component），而撰写的方式有两种

撰写元件的方法：

JS function

function Smile(){
    return <div>?</div>;
}

ES6 Class

Class Smile extends React.Component {
  render() {
    Return <div>?</div>;
  }
}

同样的元件带上不同的资料，使用 Props

知道基本的 Component 的写法之後，就可以练习
1.去拆解或组合并复用元件
2.重复使用元件并带入不同资料，使用 Props，像函数传递参数

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

const element = (
  <div>
    <h1>=== Emoji List and Message ===</h1>
    <Greet message="LOL" face="?" />
    <Greet message="..." face="?" />
    <Greet message="No!" face="?" />
  </div>);
ReactDOM.render(element, document.getElementById('root'));

以下组合例子(里面使用了map语法，後面会更详细的说明)

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

function Emotions() {
  const emojiList = [{
    message: 'LOL',
    face: "?"
  }, {
    message: 'speechless',
    face: "?"
  }, {
    message: 'Shocked',
    face: "?"
  }]
  return (
    <div>
    <h1>=== Emoji List and Message ===</h1>
      {
        emojiList.map(item=>{
          return <Greet key={item.face} message={item.message} face={item.face} />
        })
      }
  </div>
  )
}

ReactDOM.render(<Emotions />, document.getElementById('root'));

Codepen