反应子继承

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

我只想让Parent定义的值可以由Child使用。

• 您正在设置对象的foo属性，然后返回children属性。在返回的上下文中，其他属性foo将如何可用？

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

解决方案：

当将值或闭包从父组件传递到子组件时，我们可以使用3个选项。

• 上下文API
  • 当子级可以深入父组件时使用
• 将道具传递给孩子
  • 用于即时父子上下文共享
• 组合
  • 使用子函数&传递相关对象

这个包含的示例遵循组合。

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>
);
}

进一步读数：

• 如何在组合中从子函数调用父函数
• 如何将道具传递给｛this.props.children｝
• https://victorofoegbu.com/notes/pass-props-to-react-children-faq