反應嵌套 3 個組件的打開和關閉標簽，當標簽內的元素未呈現時

Question

我在這里發現了一個類似的問題： React component Closed tag但我仍然很困惑......

為什么當我這樣做時它不起作用？ innertherinner 不會被渲染。

function Outer(props) {
  return (
    <Inner>
      <InnerTheInner />
    </Inner>
  )
}

function Inner(props) {
  return (
    <>

    </>
  )
}

function InnerTheInner() {
  return (
    <>
      innertheinner
    </>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <Outer user='nishi' avatar='avatar photo' />
  </React.StrictMode>,
  document.getElementById('root')
);

是不是等同於這個：

<Outer>
  <Inner>
    <InnerTheInner>
        InnerTheInner
      </InnerTheInner>
  </Inner>
</Outer>

Answer 1

你需要

function Inner(props) {
  return <>{props.children}</>;
}

否則它只會始終呈現

  return (
    <>

    </>
  )

結帳https://reactjs.org/docs/composition-vs-inheritance.html

Answer 2

事實上，您正在使用Inner組件渲染一個空 Fragment - 沒有任何子節點。 React 組件不會在內部渲染其子組件，除非您明確告訴它們這樣做：

function Inner(props) {
  return (
    <>
      {props.children}
    </>
  )
}

這樣，在<Inner>內部傳遞的每個組件都將被渲染（因為它是children屬性的一部分）。

您也可以簡化它，因為根本不需要使用 Fragment，只需返回props.children就可以了。

function Inner(props) {
  return props.children
}