如何在组件外部获取React道具

Question

我需要一种方法来加载此脚本的正确语言，并且该信息是props值。 粗略地说，它看起来像这样：

class AddressInput extends React.Component {
  render() {
    return (
      <PlacesAutocomplete
        do={this.someStuff}
      />
    );
  }
}

export default scriptLoader(
  `https://maps.googleapis.com/maps/api/js?&language=${this.props.language}`;
)(connect(mapStateToProps, mapDispatchToProps)(AddressInput));

我知道无法在组件外部访问this.props ，所以我如何才能让scriptLoader获得动态值？

Answer 1

您基本上就在那里。 您甚至有将其设置为HOC的想法。 这是实现：

function scriptLoader(WrappedComponent) {
  return (props) => {
    const dynamicUrl = `https://maps.googleapis.com/maps/api/js?&language=${props.language}`;
    return <WrappedComponent {...props} url={dynamicUrl}/>
  }
}

HOC接受一种称为language的道具，创建url，然后将其以道具名url传递给包装的组件。 显然，您可以自行决定更改所有这些道具名称。

// usage in the parent
<AddressInput language="en"/>

// what is available in your presentational component
class AddressInput extends React.Component {
  render() {
    console.log(this.props.url) // https://maps.googleapis.com/maps/api/js?&language=us
    return (
      <PlacesAutocomplete
        do={this.someStuff}
      />
    );
  }
}