javascript - React 0.12+如何处理组件引用变量和props？

Question

考虑这个简单的路由机制:

componentDidUpdate(prevProps, prevState) {
  if (window.location.pathname === '/login') {
    this.setState({handler: <LoginScreen someProp="someValue"/>});
  }
}

render() {
  return <div>
    {this.state.handler}
  </div>;
}

到目前为止一切顺利。但是如何在子组件上覆盖 props——或者更重要的是，设置一个 ref？

cloneWithProps() 不再支持 ref，并且您不能在 JSX 文件中使用 createFactory()。您也不允许在 JSX 中使用 createElement:

componentDidUpdate(prevProps, prevState) {
  if (window.location.pathname === '/login') {
    this.setState({handler: LoginScreen});
  }
}

render() {
  var handler = React.createElement(this.state.handler, {ref: "foo"});
  return <div>{handler}</div>;
}

是否有一些未记录的行为允许您在 JSX 文件中使用组件类引用或此类实例执行某些操作？

Answer 1

您完全可以在 JSX 文件中使用 createElement 和 createFactory。唯一需要注意的是 <X/>本质上是一个 createElement 运算符，所以就像你不能做 <<X/>/>您无法创建元素并将其传递给运算符。

您所做的完全没问题。只要您存储组件类或工厂，而不是元素(实例)，您就不会有任何问题。

在 0.12+ 中，JSX 区分小写和大写组件名称，因此如果您想在 JSX 中使用动态组件，只需将其别名为 PascalCase 变量即可。

render() {
  var Handler = this.state.handler;

  return <div><Handler ref="foo" /></div>;
}

由于其他更改，Handler 可以是组件类或标记名称字符串，例如'div' .