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

Question

I need a way to load the correct language of this script, and that info is a props value. Roughly put, it would look something like this:

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));

I understand that this.props isn't accessible outside the component, so how would I be able to get scriptLoader to get a dynamic value?

Answer 1

You're basically there. You even have the idea of making it an HOC. Here is the impelementation:

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

The HOC is accepting a prop called language , creates the url, and passes it down to the wrapped component, under the prop name url . Obviously, all these prop names can be changed at your discretion.

// 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}
      />
    );
  }
}