React事件处理和条件渲染详解

React的命名方式：

小驼峰的命名方式，例如：activateLasers。

传统的事件传参模式

<button onclick="activateLasers()">
Activate Lasers</button>

react中的传参模式

<button onClick={activateLasers}>
  Activate Lasers
  </button>

注意：

react不能返回false阻止默认行为。

react中用

 e.preventDefault();

e是一个合成事件，不需要考虑兼容问题。​​​​​​​

 

 

 

在react的，你要的不同的行为都可以封装为一个组件。根据要显示的状态不同。可以只渲染，改渲染的组件。​​​​​​​
 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('root'));

登录状态显示用户信息就可以实践得到。

元素变量

有状态组件，就是有生命周期，有自己状态的组件。​​​​​​​

if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

 条件渲染 if else是种不错的选择。也有更简洁的方式。

与运算符 &&

{unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }

如果条件是true，右边的dom就会渲染。

​​​​​​​

三目运算符

{isLoggedIn ? 'currently' : 'not'}

三目运算也可以用于渲染组件，根据状态显示不同的组件。

阻止组件渲染

return null就不会渲染，也不会影响其生命周期。