如何处理 React 0.12+ 中的组件引用变量和 props

How to deal with component reference variables and props in React 0.12+?

本文关键字：组件 引用 变量 props 何处理 处理 React      更新时间：2023-09-26

考虑这个朴素的路由机制：

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

目前为止，一切都好。但是如何在子组件上覆盖道具——或者更重要的是，设置一个引用呢？

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 文件中对组件类引用或此类实例执行某些操作？

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

你正在做的事情是完全没问题的。 只要您存储组件类或工厂，而不是元素（实例），就不会有任何问题。

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

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

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

相关文章：