尝试将道具和状态传递给子组件

Question

我有一个父功能组件，我需要将道具和状态传递给子功能组件，我设法只传递了一个主题（道具或状态），下面的代码显示了获取的数据，首先我一直在使用 const Footer = ({name, addresse, phone}) => {} 然后我将其替换为 const Footer = (props) => {} 我以为我可以这样传递它们！！

{props.colorScheme} 可以在 App.js 中访问，但不能在 Footer 组件中访问，我应该使用上下文 API 来传递道具吗？仅供参考，这是我的 index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const colorScheme = root_el.getAttribute("color-scheme");

ReactDOM.render(
    <App customBackground={customBackground} colorScheme={colorScheme} />,
    root_el
);

我的应用组件

import React, {useEffect, useState, Suspense, lazy } from 'react';
import axios from 'axios';
import Footer from "./components/Footer";

const App = (props) => {

    const [infos, setInfos] = useState({});

    useEffect( () => {
        loadData();
    }, []);

    const loadData = () => {

        axios.get(`https://api`)
        .then((res) => {
            console.log(res.data);
            const infs = setInfos(res.data);
        });
    }
    return (
        <div>
            <Footer name={infos.name} adresse={infos.adresse} phone= {infos.phone}
        </div>
    )
};

export default App;

我的子组件：

import React from 'react';

const Footer = (props) => {
   const {name, adresse, phone} = props;
   return (
   <div>
       <h3>{props.colorScheme}</h3>
       <span>{name}<span>
       <span>{adresse}<span>
       <span>{phone}<span>
   </div>
   )
}
export default Footer;

Answer 1

您可以继续将道具传递给页脚组件，或者您可以像您指出的那样使用上下文。通过 props 传递 colorScheme 如下所示。

注意：您的代码在页脚中将 colorScheme 显示为 h3，我将其保留原样。

更新的应用程序组件：

import React, {useEffect, useState, Suspense, lazy } from 'react';
import axios from 'axios';
import Footer from "./components/Footer";

const App = (props) => {
    const [infos, setInfos] = useState({});
    const { colorScheme } = props;
    useEffect( () => {
        loadData();
    }, []);

    const loadData = () => {

        axios.get(`https://api`)
        .then((res) => {
            console.log(res.data);
            const infs = setInfos(res.data);
        });
    }
    // Footer tag below was missing the tag's closing
    // Added colorScheme prop
    return (
        <div>
            <Footer 
              colorScheme={colorScheme} 
              name={infos.name} 
              adresse={infos.adresse} 
              phone= {infos.phone}/> 
        </div>
    )
};

export default App;

已更新页脚

import React from 'react';

const Footer = (props) => {
   const {name, adresse, phone, colorScheme} = props;
   return (
   <div>
       <h3>{colorScheme}</h3>
       <span>{name}<span>
       <span>{adresse}<span>
       <span>{phone}<span>
   </div>
   )
}
export default Footer;

您还可以使用 createContext 和 useContext 创建一个新的上下文，这样您就可以通过一种方式让所有组件访问它。您不必通过道具传递配色方案。您可能想同时执行这两项操作，以便拥有一组全局默认颜色，然后使用一个道具让您覆盖它们。

尝试将道具和状态传递给子组件

Trying to pass props and state to a child component

reactjs

react-props