Question

我有一个父功能组件，我需要将props和state传递给一个子功能组件，我设法只传递了一个主题（props或state），下面的代码显示了获取的数据，首先一直使用 const Footer =（{name，adresse，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

您可以继续将道具传递到页脚组件，或者可以使用上下文。通过道具传递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创建一个新的Context，以便您可以通过一种单一方式让所有组件对其进行访问。您无需通过道具传递配色方案。您可能要同时做这两项工作，以便拥有一组全局默认颜色，然后有一个道具可以覆盖它们。

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

1 个答案: