reactjs - 我如何传递 URL 参数来 react js 小部件

Question

我有一个从 API 获取数据的 React 小部件(例如: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}`)
   ...
}