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

Question

尝试使用相同的方法将数据从 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;

Answer 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;

如评论中所述，您不应 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;

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

Why do my props not work in grandchild component?

javascript

reactjs

react-functional-component