如何将输入组件的输入值以const形式传递至其他组件

核心思路 #

原有的静态常量导出方式无法支持动态值传递，需通过状态提升将输入值的状态托管在顶层App组件中，再通过props逐层传递给依赖该值的组件，实现动态值的实时同步与流转。

具体实现步骤 #

1. 改造Input组件：转为受控组件，传递输入值到父组件 #

将Input改成受控组件，接收父组件传入的状态值和回调函数，实时把用户输入的内容同步给父组件。

// Input.jsx
export default function Input({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder="输入动态文本"
    />
  );
}

2. 改造Concatenate组件：通过props接收动态值，生成动态URL #

不再依赖静态常量导入，改为接收父组件传入的动态值，拼接生成实时变化的URL。

// Concatenate.jsx
export default function Concatenate({ dynamicValue }) {
  const prefix = "https://api.example.com/";
  const suffix = "/data";
  return `${prefix}${dynamicValue}${suffix}`;
}

3. 改造Datafetch组件：通过props接收动态URL，实时请求数据 #

接收父组件传入的动态URL，当URL变化时自动重新请求并展示数据。

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

export default function Datafetch({ apiUrl }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!apiUrl) return;
    
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(apiUrl);
        if (!response.ok) throw new Error('请求失败');
        const result = await response.json();
        setData(result); // 根据实际API返回结构解析数据
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [apiUrl]); // URL变化时触发重新请求

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;
  if (!data) return <div>请输入内容生成URL</div>;

  // 展示API返回的特定文本内容，示例为data.content，需根据实际结构调整
  return <div>{data.content}</div>;
}

4. 改造Output组件：接收子组件展示结果 #

// Output.jsx
export default function Output({ children }) {
  return (
    <div className="output-container">
      <h3>结果展示</h3>
      {children}
    </div>
  );
}

5. 整合到App组件：统一管理状态与组件流转 #

在App中维护输入值的状态，将其传递给Concatenate生成动态URL，再把URL传给Datafetch，最后将Datafetch嵌入Output中渲染。

// App.jsx
import { useState } from 'react';
import Input from './Input';
import Concatenate from './Concatenate';
import Datafetch from './Datafetch';
import Output from './Output';

function App() {
  const [dynamicValue, setDynamicValue] = useState('');
  const apiUrl = Concatenate({ dynamicValue });

  return (
    <div className="app-container">
      <h1>动态数据请求流程</h1>
      <Input value={dynamicValue} onChange={setDynamicValue} />
      <Output>
        <Datafetch apiUrl={apiUrl} />
      </Output>
    </div>
  );
}

export default App;

关键说明 #

• 状态提升：将输入值的状态放在App组件中，确保所有依赖该值的组件能实时获取最新数据。
• 受控组件：Input通过受控模式保证输入内容与状态完全同步。
• 依赖监听：Datafetch通过useEffect监听URL变化，自动触发新的请求，实现动态响应。

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