React简介：复用重复内容的组件

在现代框架存在之前，...

当我想复制这种类型的组件时。

<h1>Je suis sensé dire une phrase customisé comme: "Bonjour!"</h1>

我不得不在其他地方重写几乎相同的东西，基本上就像在没有函数或方法的语言中编码。

<h1>Je suis sensé dire une phrase customisé comme: "Bonsoir!"</h1>

<h1>Je suis sensé dire une phrase customisé comme: "Bon-joir!"</h1>

这不是很好...

现代框架，包括React，提供了一种设计，可以立即解决这个问题。

A部分

function PhraseCustom() {
  return <h1>Ma phrase test: "Bon-joir!"</h1>
}

我可以这样使用它。

function App() {
  return (
    <div>
      <p>Bijour</p>
      <PhraseCustom />
    </div>
  )
}

这非常愚蠢，一个组件就是一个函数。一个我们将以一种奇怪的方式实例化的函数，但其声明是一个函数的声明，然后它履行了与普通函数相同的作用：重复使用。

JSX，比JS多一点

你可以想象，如果你把它放在浏览器的控制台中，这个语法是行不通的。

JSX，是JavaScript XML的缩写，是当年在Facebook做React的团队发明的一种脚本，允许你做标记。
基本上，允许你做同样事情的（可怕的）语法是这样的。

function PhraseCustom( ) {
return React.createElement( 'h1', {},Ma phrase test: "Bon-joir!")
}

我们在XML中写的东西将被替换成与我刚才展示的内容类似的东西。

道具。

嗯，这很酷，我可以重复使用我的组件，但如果我把它作为一个组件重复使用，但实际上我想把不同的东西放在里面，否则它就不太有趣了。

function App() {

  return (
    // Je passe une prop "message" 
    // Dont la valeure est 'Hey hey!'
    <div>
      <PhraseCustom message='Hey hey!' />
    </div>
  )
}

function PhraseCustom(props) {
  // J'utilise la prop "message"
  // Elle sera contenue dans l'object "props"
  return <h1>Ma phrase test: {props.message}</h1>
}

请注意，胡须{} ，在JSX ，意思是 "为我解释这个"。

渲染的区别在于：。

return <p>1+1</p>

将从字面上显示1+1
，而这。

return <p>{1+1}</p>

将尝试解释晶须之间的内容。