时间戳

首页 > 解决方案 > 尝试将道具和状态传递给子组件

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

问题描述

我有一个父功能组件，我需要将道具和状态传递给子功能组件，我设法只传递了一个主题（道具或状态），下面的代码显示了获取的数据，首先我一直在使用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;

标签： reactjsreact-props

解决方案

您可以继续将道具传递给页脚组件，或者正如您所指出的，您可以使用上下文。通过 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 创建一个新的上下文，以便您可以通过单一方式让所有组件访问它。您不必通过道具传递配色方案。您可能想要同时执行这两项操作，以便拥有一组全局默认颜色，然后使用一个可以覆盖它们的道具。

推荐阅读