Button综合

显示title

通过操纵 props.title 显示 title的名字，而不是在括号外自我添加。

function Button(props) {
  return (<button>{props.title}</button>);}
function App(props) {
  return (<Button title={"hello"} />);}
ReactDOM.render(<App />, document.getElementById('root'))

定义defaultHandler显示结果

(1)通过箭头方法定义 defaultHandler
(2) 箭头方法定义事件的点击，如果自身有值，则返回值是自己，如果没有，返回值为defaultHandler
(3) 处理事件 handler（event）
(4) 返回点击的属性和 title

function Button(props) {
  const defalutHandler = () => { console.log('defalut handler')}
  const onClick = evt => {const handler = props.onClick || defalutHandler
    handler(evt) }
  return (<button onClick={onClick}>{props.title}</button>);}
function App(props) {
  return (<Button title={"hello"} />);}
ReactDOM.render(<App />, document.getElementById('root'))

结果：点击button ，显示 defaultHandler

多层嵌套显示结果

Button定义 defaultHandler 和 onClick 。
HelloButton 定义调用handler的方法,显示 hilt ，返回 onClick 和 title。
App调用 HelloButton 的方法

function Button(props) {
  const defalutHandler = () => { console.log('defalut handler')} 
  const onClick = evt => {const handler = props.onClick || defalutHandler
    handler(evt)} 
  return ( <button onClick={onClick}>{props.title}</button>);}
function HelloButton(props){
   const handler = (evt) => {alert('hilt')}
    return(<Button onClick={handler} title={'Hi'} />);}
function App(props) {
  return (<HelloButton  />);}
ReactDOM.render(<App />, document.getElementById('root'))