React高级指南

转发 refs 给 DOM 组件

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Reac t将ref传递给 forwardRef 中的 (props, ref) => ... 函数作为第二个参数
当附加 ref 时，ref.current 将指向 DOM节点。

JSX

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

props.messages.length为0时，会渲染0，为了解决该问题，确保 && 之前的表达式总是布尔值

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

如果在输出中想要渲染 false ，true，null 或者 undefined ，你必须先将其转化

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

React高级指南学习笔记

React高级指南

转发 refs 给 DOM 组件

JSX