- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目前,我已经创建了一些不同的表单元素。我正在尝试以不同的方式创建它们,这样我就可以将它们拼凑在一起,为一个表单创建不同的格式。
这是我的一些表单元素:
// Field Component
interface IField extends ILabel {}
export const Field: React.FunctionComponent<IField> = props => {
return (
<div>
<Label {...props} />
{props.children}
</div>
);
};
// Label Component
interface ILabel {
htmlFor: string;
label: string;
required?: boolean;
}
export const Label: React.FunctionComponent<ILabel> = props => {
return (
<label htmlFor={props.htmlFor}>
{props.label}
// Some required icon would go where I've added the <span />.
{props.required && <span />}
</label>
);
};
// Input Wrapper Component
export const InputWrapper: React.FunctionComponent = props => {
return <div>{props.children}</div>;
};
// Input Component
interface IInput {
type: string;
id: string;
name: string;
value?: string;
placeholder?: string;
required?: boolean;
}
export const Input: React.FunctionComponent<IInput> = props => {
return (
<input
type={props.type}
id={props.id}
name={props.name}
value={props.value}
placeholder={props.placeholder}
required={props.required}
/>
);
};
下面是我实现组件的方式:
<Field htmlFor="name" label="Name:" required>
<InputWrapper>
<Input
id="name"
type="text"
name="name"
placeholder="Enter your name..."
/>
</InputWrapper>
</Field>
我希望能够在 Field
组件上设置 required
Prop ,它也会被传递到我的 Input
组件,无论它嵌套得有多深。这怎么可能?
我还提供了一个 CodeSandBox 演示。
提前感谢您的帮助!
最佳答案
当使用 props.children
并且不可能知道嵌套组件的确切层次结构,或者它可能因不同的用例而异,可能很难尝试通过props
从 parent 到 child 。
Context为组件树提供一种共享数据和对更改使用react的方法。
Your codesandbox adapted to the explained solution
https://codesandbox.io/s/react-stackoverflow-60241936-fvkdo
在您的情况下,您需要为 Field
组件创建一个 Context
以“共享”required
字段并定义一个默认值值(value)。
interface IFieldContext {
required?: boolean;
}
export const FieldContext = React.createContext<IFieldContext>({
required: false // default value when the prop is not provided
});
然后在 Field
组件中使用 FieldContext.Provider
,您可以为嵌套组件分配“共享”值。
export const Field: React.FunctionComponent<IField> = props => {
return (
<FieldContext.Provider value={{ required: props.required }}>
<Label {...props} />
{props.children}
</FieldContext.Provider>
);
};
最后,在 Input
组件中,使用 FieldContext.Consumer
访问“共享”值并检索分配给字段
组件。然后您将能够从 IInput
接口(interface)中删除 required
字段,因为它现在来自 Context
而不是 props
了。
interface IInput {
type: string;
id: string;
name: string;
value?: string;
placeholder?: string;
}
export const Input: React.FunctionComponent<IInput> = props => {
return (
<FieldContext.Consumer>
{context => (
<input
type={props.type}
id={props.id}
name={props.name}
value={props.value}
placeholder={props.placeholder}
required={context.required} // access context prop
/>
)}
</FieldContext.Consumer>
);
};
“瞧”,你可以在 Field
组件上使用 required
Prop ,它将应用于你嵌套的 Input
组件,无论 Input
的嵌套有多深...花哨的东西😄
export const App: React.FunctionComponent = () => {
return (
<Field htmlFor="name" label="Name:" required>
<InputWrapper>
<Input
id="name"
type="text"
name="name"
placeholder="Enter your name..."
/>
</InputWrapper>
</Field>
);
};
关于reactjs - React TS - 如何将 props 从父组件传递给深度嵌套的子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60241936/
我有一个层次结构中的项目列表,我正在尝试将此列表解析为实际的对象层次结构。我正在使用modified pre-order tree traversal存储/迭代此列表,所以我拥有的是树的子集,包括所有
给定这个类: public class Parent { public Child[] Children {get;set;} } 还有这个数组: Parent[] parents; 如何使用 L
我面临着一些难以完成这个看似简单的任务。 我在一个嵌套块 (Suggest.phtml) 中,我想从父块 (result.phtml) 获取一个值(搜索结果的数量,以及集合计数) 我错了还是这里没有简
我在访问子模型重复器字段以在没有用户操作的情况下加载时遇到问题,我在父模型 Controller 中使用 RelationController这就是我在父 Controller 中所做的 class
我有一个 datetime 指令,其范围内包含两个属性:date 和 time。如何从父 Controller 访问这些属性?我尝试这样做 Start: End: You
我的父类是: public Class Parent { protected void foo() { bar(); } protected void
所以我知道如何中断列表的继承 (SPList.BreakRoleInheritance(true)),但是如何以编程方式从其父级重新继承? 谢谢 最佳答案 MSDN link . SPList.Res
最近我们将maven版本更改为3.5.4根据https://issues.apache.org/jira/browse/MNG-5940 Maven Super POM 中的 maven-source
我需要在单击页面背景(#page)时触发一个事件(例如隐藏 float 购物车),但在单击内部内容时不会发生此事件。所以我需要这个事件发生在空间:页面减去内容。我该如何实现它?谢谢 如果我有这个结构:
我在另一个 ajax 函数中有一个 ajax 函数 $.ajax({ url: '../...', type: 'POST',
我创建了两个类 - Building 和 Warehouse。 Warehouse 扩展 Building。我创建了 Building map (building_map),其中放置了 Buildin
我有一个获取和处理数据的 Activity ,我想启动一个新 Activity ,该 Activity 能够从父 Activity 访问一些变量(复杂数据结构)。 我不能在这里使用序列化,有没有一种简
在 HTML 中,我有两个函数,一个是仅带有警报的 abc,另一个是使用 window.open() 创建一个新窗口,并填充预定义的 HTML 字符串。我想从父 HTML 调用该函数。我尝试过调用pa
我一直在研究这个脚本并且一切正常,除了 $(this).parents(".clonedInput").clone()。按钮克隆引用放置在 .clonedInput div 中。 如果能帮助我从 cl
我有以下代码: 主要 HTML 文档 $(function(){ $("#i").load(function(){ var $iframeConten
html 的一部分结构如下。我想从中获得工作“标题”和“时间”。我可以单独获取它们,例如: from bs4 import BeautifulSoup pages = ' \
我正在尝试从父 div 中删除底部边框。我已经编写了以下 HTML 代码,但我认为我的方法不正确。看到这张图片 这是我的 HTML 代码 j
通常,我可以从 Activity 调用扩展 DialogFragment 并实现 DialogInterface.OnClickListener() 的对象。 然后,如果我想从那个 Dialog 调用
我花了好几个小时搜索如何从嵌套 Controller 更新服务值。 我的子 Controller 需要更新服务中的值。该值需要显示在父 Controller 中。 我做了一个jsfiddle,让它更清
我有一个包含一些数据的表格,表格中的每个元素都是一个 React 类组件。它看起来像这样: 我想要的只是有一个用于“选中所有”功能的复选框(左上角的复选框)。问题是我不知道如何解决这个问题,因为 pr
我是一名优秀的程序员,十分优秀!