React组件间传递常量字符串：如何复用拼接好的URL

我有一个React组件会将多个字符串拼接成URL常量，想知道如何在另一个需要用该URL获取数据的组件中使用这个常量。相关代码如下：

URLconcatenate.js（创建常量urlString） #

const string01 = 'www.'
const string02 = 'apple';
const string03 = '.com'
const urlString = string01 + string02 + string03

// 验证拼接结果
console.log(urlString);

function URLconcatenate() {
    return (
        <div>
            {urlString}
        </div>
    )
}

export default URLconcatenate

Datafetch.js（需要使用urlString） #

import { useState, useEffect } from 'react';
import URLconcatenate from './URLconcatenate';

const Datafetch = () => {
    const [price, setPrice] = useState([]);
    useEffect(() => {
        fetch(urlString)
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
                setPrice([data]);
            });
    }, []);
    return (
        <div>
            {price.map((thePrice) => (
                <p key={thePrice.c}>Today's price for AAPL is: ${thePrice.c}</p>
            ))
            }
        </div >

    );
};

export default Datafetch 

当前代码仅导出了URLconcatenate组件，未对外暴露urlString常量，导致其他组件无法直接访问。可以通过以下两种方式解决：

方式1：单独导出urlString常量 #

修改URLconcatenate.js，在导出组件的同时导出目标常量：

const string01 = 'www.'
const string02 = 'apple';
const string03 = '.com'
export const urlString = string01 + string02 + string03 // 添加export暴露常量

// 验证拼接结果
console.log(urlString);

function URLconcatenate() {
    return (
        <div>
            {urlString}
        </div>
    )
}

export default URLconcatenate

随后在Datafetch.js中直接导入该常量使用：

import { useState, useEffect } from 'react';
import { urlString } from './URLconcatenate'; // 导入urlString

const Datafetch = () => {
    const [price, setPrice] = useState([]);
    useEffect(() => {
        // 注意：fetch需要完整带协议的URL，否则会被当作相对路径处理
        fetch(`https://${urlString}`) 
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                setPrice([data]);
            })
            .catch(err => console.error('请求出错:', err)); // 建议添加错误捕获
    }, []);
    return (
        <div>
            {price.map((thePrice) => (
                <p key={thePrice.c}>今日AAPL价格：${thePrice.c}</p>
            ))}
        </div>
    );
};

export default Datafetch 

方式2：抽离到独立配置文件 #

如果后续有更多URL或常量需要管理，建议将常量放到单独的配置文件中，提升可维护性：

config.js #

// 直接定义或保留拼接逻辑均可
export const APPLE_URL = 'www.apple.com';

在URLconcatenate.js中导入使用：

import { APPLE_URL } from './config';

function URLconcatenate() {
    return (
        <div>
            {APPLE_URL}
        </div>
    )
}

export default URLconcatenate

在Datafetch.js中导入使用：

import { useState, useEffect } from 'react';
import { APPLE_URL } from './config';

const Datafetch = () => {
    const [price, setPrice] = useState([]);
    useEffect(() => {
        fetch(`https://${APPLE_URL}`)
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                setPrice([data]);
            })
            .catch(err => console.error('请求出错:', err));
    }, []);
    return (
        <div>
            {price.map((thePrice) => (
                <p key={thePrice.c}>今日AAPL价格：${thePrice.c}</p>
            ))}
        </div>
    );
};

export default Datafetch 

额外提示 #

• fetch请求的URL必须包含完整的http/https协议，否则会被当作当前页面的相对路径处理，导致请求失败。
• 建议在fetch流程中添加错误捕获，避免请求失败时页面无反馈。

内容的提问来源于stack exchange，提问作者Jamie