子组件在 ReactJS 中使用父母的 Prop

Question

我正在创建一个表单组件，它有一个Form 组件和一个Input 组件。像这样的：

<Form>
  <Input name="name" />
  <Input name="email" />
</Form>

在我的设置中，标签是从 name 属性自动生成的。不过，我想做的是提供一个不显示标签的选项。现在，我可以像这样在每个 <Input> 组件上执行此操作：

<Form>
  <Input noLabel name="name" />
  <Input noLabel name="email" />
</Form>

但我真正想做的是将它添加到<Form> 组件并让它自动应用于每个<Input> 组件。像这样的：

<Form noLabel>
  <Input name="name" />
  <Input name="email" />
</Form>

按照我的设想，在定义 <Input> 组件时，我可以检查是否在 <Form> 组件上设置了 noLabel 属性。像这样的：

export const Input = props => {
  ...
  {!props.noLabel && <label>...}
  <input.../>
  ...
}

但我不知道如何从 <Form> 组件中访问 noLabel 属性，以便检查它是否已设置。

关于如何做到这一点的任何想法？

Answer 1

我会选择上下文方法，以克服我在对 Mohamed 解决方案的评论中提到的问题，这也将启用间接嵌套：

const FormContext = React.createContext();

const Form = ...;

Form.Context = FormContext; // or simply Form.Context = React.createContext();

export default ({noLabel, ...props}) => <FormContext.Provider value={{noLabel}}/>;

然后您的输入组件将像这样使用它：

const Input = props => {
  const {noLabel} = useContext(Form.Context);

  return (... < your no label logic here > ...);
}

或者像这样：

const Input = ....;

export default props => () => {
  const {noLabel} = useContext(Form.Context);

  return <Input noLabel={noLabel}/>
}

Answer 2

一种方法是操纵form 的children。映射每一个并注入noLabelprop。您仍然需要在Input 内部查看noLabel prop，但工作量肯定会减少

const Form = ({children, noLabel}) =>{
    return React.children.forEach(_, child =>{
        return React.cloneElement(child, { noLabel })
    })
} 

Answer 3

在您的Form 组件中，您可以使用React.Children 和React.cloneElement 将noLabel 属性传递给输入组件，如下所示：

const children = React.Children.map(this.props.children, child =>
  React.cloneElement(child, { noLabel: this.props.noLabel  })
);

return (<form>{children}</form>);