2019-09-01 React 内联If 和 知识小点

处理事件

• React事件使用camelCase而不是小写命名。
• 使用JSX，您可以将函数作为事件处理程序而不是字符串传递。

与html一个区别：

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React中：

 function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );

例如：此Toggle组件呈现一个按钮，允许用户在“ON”和“OFF”状态之间切换：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

知识点：

• this作用域（官方建议写在构造函数中）： this.handleClick = this.handleClick.bind(this);
  

  //另外两种this 传递方法
  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

• 状态更新：回调函数写法

  this.setState(state => ({
  isToggleOn: !state.isToggleOn    
  }));

React 内联If与逻辑&&运算符

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

这里的 && 充当 if 语句，不同的是，平常我们熟悉的三木表达式 是典型的 If-Else 语句。

防止组件渲染

null  而不是 false

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

经验法则

map()调用中的元素需要键（key）。