如何将数据从一个 React 组件传递到另一个？

Question

作为 React 的新手，我很难将数据从父组件传递到其他组件。我分享下面的代码以供参考。我的目标是将变量 stocksName 传递给其他组件，例如 Stocks.js，目前它未被识别。任何帮助将不胜感激。

App.js

import React, { useState, useEffect } from 'react'
import Select from 'react-dropdown-select';
import axios from 'axios';
import './App.css'
import StocksView from './components/Stocks'

function App() {

  const [data, setData] = useState([]);
  const [stocksName, setStocksName] = useState([]);
  const [selectvalue, setselectvalue] = useState([]);
  const [message, setMessage] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(selectvalue);
    axios.post("./getStocks", selectvalue)
      .then((response) => {
        console.log(response);
        const nodeData = JSON.parse(response.data.nodeData);
        setStocksName(nodeData.STOCKS_NAME);
      }).catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    fetch("/listPartitions")
      .then((response) => response.json())
      .then((partition) => {
        const parsed = JSON.parse(partition.nodePartition);
        const partitions = Object.entries(parsed).map(([key, value]) => ({
          label: value,
          value: key
        }));

        // put the partitions data in the state
        setData(partitions);
        console.log(parsed, partitions);
      });
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Select
          name="select"
          options={data}
          multi
          onChange={(selected) => setselectvalue(selected.map((item) => item.label))
          }
        />
        <button type="submit">Submit</button>
        <div className="message">{message ? <p>{message}</p> : null}</div>
      </form>
      <div>
        <StocksView/>
      </div>
    </div>

  )
}

export default App;

Stocks.js

import React from 'react'
import Graph from 'react-vis-network-graph'

export default function StocksView() {
    const stocks = {
        nodes: [
            {stocksName}
        ]
    }
    
     return (
    <div className='container'>
        <Stocks 
            stocks={stocks}
        />
    </div>
  )

Answer 1

要将 stockName 变量从 App 组件传递到 StocksView 组件，您只需将其作为 prop 传递即可。

实现此目的的另一种方法是创建全局存储，这是一种更高级的方法，适合管理大量状态。但是，现在您可以继续了解道具的概念（检查此处）

这里是如何使用道具来做到这一点。

App.js：

import React, { useState, useEffect } from 'react'
import Select from 'react-dropdown-select';
import axios from 'axios';
import './App.css'
import StocksView from './components/Stocks'

function App() {

  const [data, setData] = useState([]);
  const [stocksName, setStocksName] = useState([]);
  const [selectvalue, setSelectValue] = useState([]);
  const [message, setMessage] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(selectvalue);
    axios.post("./getStocks", selectvalue)
      .then((response) => {
        console.log(response);
        const nodeData = JSON.parse(response.data.nodeData);
        setStocksName(nodeData.STOCKS_NAME);
      }).catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    fetch("/listPartitions")
      .then((response) => response.json())
      .then((partition) => {
        const parsed = JSON.parse(partition.nodePartition);
        const partitions = Object.entries(parsed).map(([key, value]) => ({
          label: value,
          value: key
        }));

        // put the partitions data in the state
        setData(partitions);
        console.log(parsed, partitions);
      });
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Select
          name="select"
          options={data}
          multi
          onChange={(selected) => setSelectValue(selected.map((item) => item.label))
          }
        />
        <button type="submit">Submit</button>
        <div className="message">{message ? <p>{message}</p> : null}</div>
      </form>
      <div>
        <StocksView stocksName={stocksName}/> {/* Passing stocksName as prop */}
      </div>
    </div>
  )
}

export default App;

Stocks.js：

import React from 'react'
import Graph from 'react-vis-network-graph'

export default function StocksView({ stocksName }) { // Accepting stocksName as a prop
    const stocks = {
        nodes: [
            {stocksName}
        ]
    }
    
     return (
    <div className='container'>
        <Graph // I suppose you meant to use Graph here instead of Stocks
            stocks={stocks}
        />
    </div>
  )
}

现在，App 组件中的stocksName 将作为 props 传递到 StocksView 组件，并且可以在 StocksView 中作为stocksName 进行访问。

如果您有任何疑问，请告诉我:(

Answer 2

您可以使用ContextProvider

我前几天也遇到同样的问题

这对我帮助很大https://es.react.dev/reference/react/createContext

使用 Context，您可以在所有组件中使用变量