反应复合组件 - 如何反应孩子？
cycle4passion
我对复合组件设计有疑问。我有一个定义 props 的 Wrapper 组件。我使用 Context.Provider 使道具可用于子内容组件。我希望内容组件的孩子将 {answer} 重新定义为 21。
限制：我想使用函数组件、钩子，没有 Redux，没有 Renderprops。没有 HOC。
const App = () => {
return (
<div className="App">
<Wrapper answer={21}>
{/* I want to do this below: <p>the answer is {answer}</p> */}
<Content>
<p>the answer is answer</p>
</Content>
</Wrapper>
</div>
);
};
const WrapperContext = createContext();
const Wrapper = ({ children, ...props }) => {
return (
<WrapperContext.Provider
value={{
...props
}}
>
{children}
</WrapperContext.Provider>
);
};
const Content = ({ children }, ...remainingProps) => {
const wrapperProps = useContext(WrapperContext);
return (
<Wrapper>
<Card>
<div id="dialog-description">
{children}
</div>
</Card>
</Wrapper>
);
};
尼古拉斯大厦
<Wrapper answer={21}>
{/* I want to do this below: <p>the answer is {answer}</p> */}
<Content>
<p>the answer is answer</p>
</Content>
</Wrapper>
因此，显而易见的答案是像在<p>the answer is 21</p>. 如果合适，21 可以来自一个被使用两次的变量。基本上，但是 App 知道它需要使用 21，让它传递到需要它的两个地方。
const App = () => {
const answer = 21;
return (
<div className="App">
<Wrapper answer={answer}>
<Content>
<p>the answer is {answer}</p>
</Content>
</Wrapper>
</div>
);
};
但是我猜您要解决的实际情况是在组件树的较高部分有包装器，因此您不知道将什么传递给<p>. 所以 Content 的工作是从上下文中获取值，然后使用它来呈现。但是为了做到这一点，您需要在 Content 组件和 App 组件之间进行双向通信。内容需要告诉应用程序“这是我从上下文中获得的值”，然后应用程序可以说“这是给定该值我想要呈现的内容”。
换句话说，您需要一个渲染道具，但这是您明确排除的可能性。如果你愿意接受这种可能性，这就是它的样子。
const App = () => {
return (
<div className="App">
<Wrapper answer={21}>
<Content>
{({ answer }) => <p>the answer is {answer}</p>}
</Content>
</Wrapper>
</div>
);
};
const Content = ({ children }, ...remainingProps) => {
const wrapperProps = useContext(WrapperContext);
return (
<Wrapper>
<Card>
<div id="dialog-description">
{children(wrapperProps)}
</div>
</Card>
</Wrapper>
);
};
Content.propTypes = {
children: PropTypes.func.isRequired,
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何让孩子输入反应
- 2
如何从另一个复合组件更新复合组件表单？
- 3
如何从另一个复合组件更新复合组件表单？
- 4
如何在组合组件的反应中进行条件渲染
- 5
如何防止Firemonkey复合组件中的子组件重复？
- 6
如何将组件定义为复合组件的属性？
- 7
如何从React中的复合组件访问html组件？
- 8
如何在复合组件中发布子组件的属性？
- 9
如何创建复合组件的实例以及如何获取它
- 10
如何在复合组件中缓存数据？
- 11
如何从酶中获得反应孩子
- 12
如何从孩子到父母获得状态反应
- 13
如何通过使用支持组件将属性从复合组件传递到支持bean？
- 14
如果复合组件为空，如何不设置组件的属性？
- 15
ui：repeat内部的复合组件：如何正确保存组件状态
- 16
如何从后备bean中查找包括复合组件ID的组件ID
- 17
如果复合组件为空，如何不设置组件的属性？
- 18
反应孩子数
- 19
反应传递属性给孩子
- 20
如何从孩子的componentDidMount中的父对象设置变量反应？
- 21
如何不将点击事件传递给孩子反应？
- 22
反应：父母还是孩子？如何决定将组件放置在哪里？
- 23
反应：父母还是孩子？如何决定将组件放置在哪里？
- 24
反应-如何刷新组件？
- 25
如何将JSF复合组件属性设置为ManagedBean属性？
- 26
如何在复合组件中加载资源包属性文件？
- 27
如何创建将Collection绑定到h：selectOneMenu和h：selectManyListbox的JSF复合组件？
- 28
如何使用JSF 2.0的复合组件将子TabMenu嵌套在Primefaces TabMenu中
- 29
如何创建允许我读取/写入属性的JSF复合组件？
我来说两句