反應孩子 Inheritance

Question

應該很簡單，但由於某種原因，我無法弄清楚這個。 我只希望在 Parent 中定義的值可供 Child 使用，但傳遞變量似乎不起作用。

    function Parent(props) {
      const name='Jimmy';
      props.foo = name;
      return props.children;
    }
    
    function Child(props) {
      const result = props.foo;
      return <h1>hello, {result}</h1>
    }
    
    export default function App() {
      return (
        <div className="App">
          <Parent>
            <Child foo={this.props} />
          </Parent>
        </div>
      );
    }

Answer 1

我只希望父級定義的值可供子級使用。

• 您正在設置 object 的foo屬性，然后返回children屬性。 其他屬性foo如何在返回的上下文中可用？

• {this.props}是指App的props ，不是Parent 。

解決方案：

從父組件向子組件傳遞值或閉包時，我們可以使用 3 個選項。

• 上下文 API
  • 當孩子可以深入父組件時使用
• 將道具傳遞給孩子
  • 用於直接的父子上下文共享
• 作品
  • 使用孩子作為 function & 通過相關 object

這個適用的例子遵循Composition 。

function Parent(props) {
  const name='Jimmy';
  return props.children(name);
}

function Child(props) {
  const result = props.foo;
  return <h1>hello, {result}</h1>
}

export function App(props) {
  return (
      <div className="App">
          <Parent>
             {(name) => {
                return (
                   <Child foo={name} />
                )
            }}
          </Parent>
      </div>
  );
}

延伸閱讀：

• 如何在作文中從孩子中調用父 function？
• 如何將道具傳遞給 {this.props.children}
• https://victerofoegbu.com/notes/pass-props-to-react-children-faq