Question

我有一个react小部件，可从API（例如：https://api.prime.com/v1/business/rating/${id}）中获取数据

在此示例中，呈现了带有${id}的信息列表。

我现在想做的是通过脚本的url参数获取ID：

<script src="https://fr.prime.com/rating-widget/merchantidentifier"></script>

例如，在7182下面的代码中，

是merchantidentifier。

merchantidentifier是变量，在此示例中，7182进入reactDOM.render()

要在商人网站上显示小部件，我们需要添加脚本标签，在此示例中为<script src="https://fr.prime.com/rating-widget/7182"></script>

如何将merchantidentifier从URL传递到React应用

var React = require('react');
import axios from 'axios';
import '../node_modules/cleanslate/cleanslate.css';
import './style.scss';

class Widget extends React.Component {

    constructor(props){
        super(props);
        this.state = {}
    }

    componentDidMount() {
        let id = this.props.id;
        axios.get(`https://api.prime.com/v1/business/rating/${id}`)
        .then((res) => {
            const brand = res.data;
            this.setState({
                rating: brand.rating,
                logo : brand.logo,
                name: brand.name,
                stars: brand.stars,
                url: brand.url
            });
        });
    }

    render() {
        return (
            <div className="cleanslate">
                <a href={this.state.url} target="_blank">
                    <img src="https://fr.prime.com/img.svg" alt="" />
                    <div className="rating-box">
                        <img src={this.state.logo} className="the-logo" alt={this.state.name} />
                        <span className="the-note">{this.state.rating}/10</span>
                        <div id="Star" className={`stars-${this.state.stars}`}></div>
                    </div>
                </a>
            </div>
        )
    }
}

ReactDOM.render(     
  <Widget id="7182" />,
  document.getElementById('root')        
);

Answer 1

由于script标记是静态的，尽管merchantidentifier是静态的，但它在运行时不会改变。

您可以使用.env文件存储merchantidentifier并在需要时使用而无需显式传递。

在项目的根文件夹中创建.env文件

REACT_APP_MERCHANT_IDENTIFIER = 7182

现在您可以在HTML和JS文件中使用它。

您可以在HTML文件中使用

<script src="https://fr.prime.com/rating-widget/%REACT_APP_MERCHANT_IDENTIFIER%"></script >

在JS文件中，

componentDidMount() {
   let id = process.env.REACT_APP_MERCHANT_IDENTIFIER;
   axios.get(`https://api.prime.com/v1/business/rating/${id}`)
   ...
}

Answer 2

因为您没有使用react-router，所以我唯一想到的

constructor(props){
        super(props);
        this.state = {}
        this.id = '0';
        var urlComponents = window.location.href.split('/');
        if(urlComponents[urlComponents.length-2] === 'rating-widget') {
          this.id = urlComponents[urlComponents.length-1];
        }
    }

在componentDidMount中使用这样的

componentDidMount() {
   let id = process.env.REACT_APP_MERCHANT_IDENTIFIER;
   axios.get(`https://api.prime.com/v1/business/rating/${this.id}`)
   ...
}

我如何传递URL参数来响应js小部件

2 个答案: