为什么我的道具在孙子组件中不起作用？答案

【问题标题】：Why do my props not work in grandchild component?为什么我的道具在孙子组件中不起作用？
【发布时间】：2021-08-31 15:39:38
【问题描述】：

尝试使用相同的方法将数据从 2 个组件传输到一个组件，但它只工作了 50%。有 3 个文档：App.js、Hort.js、Hord.js。从 app.js 转移到 hort.js 是有效的，但从 hord.js 转移到 hort.js 不是。可能是什么原因？

App.js：

import React from 'react'
import Hort from './Hort'

function App(props) {
    const text1 = 'check1'
    return (
        <Hort test1={text1} />
  );
}

export default App;

Hord.js：

import React from 'react'
import Hort from './Hort'

function Hord(props) {
    const text2 = 'check2'
    return (
        <Hort test2={text2} />
    );
}

export default Hord;

Hort.js：

import React from 'react'
import App from './App'
import Hord from './Hord'

function Hort(props) {
    
    return (
       <div>
            <h1>Just {props.test1}</h1>
            <h2>Just {props.test2}</h2>
        </div>
        )
}

export default Hort;

【问题讨论】：

你在哪里调用 Hord 组件？
这里到底有什么问题？您作为道具传递的值没有正确呈现？还有Hord 渲染在哪里（我假设App 是通常的基本组件）？您是否还打算将Hort 和App 导入Hort？（这会给你一个导入周期）
@Maaas 你试过我的答案了吗？考虑提供一些反馈
@axtck 感谢您的帮助。你是对的。我们希望它工作的所有内容都需要在主文档中呈现。再次感谢您

标签： javascript reactjs react-functional-component

【解决方案1】：

你永远不会渲染<Hord>，如果一个组件永远不会渲染，它就不会渲染它里面的东西。

在您的 index.js 中，您可能有如下代码：

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

此代码表明<App> 组件将在您的index.html 中的root 元素中呈现。

所以从<App>组件开始，你可以构建你的组件树，因为你从不调用<Hord>，它永远不会渲染，<Hord>内部的组件也不会渲染。

在您的 <App> 组件中渲染 <Hord>。

import React from 'react'
import Hort from './Hort'
import Hord from './Hord'

function App(props) {
    const text1 = 'check1'
    return (
        <Hort test1={text1} />
        <Hord />
  );
}

export default App;

如 cmets 中所述，您不应该 import 可能导致无限循环的组件。

import React from 'react'
// * removed imports

function Hort(props) {
    return (
       <div>
           <h1>Just {props.test1}</h1>
           <h2>Just {props.test2}</h2>
       </div>
    )
}

export default Hort;

【讨论】：