React 嵌入和与容器组件的通信

Question

我正在寻找合适的模式/方法来使用 React 开发它，但到目前为止我没有找到任何相关/优雅的东西。

我基本上想写一个表单引擎。对于表单的每个输入，我想要一些通用的行为。

我在 React 文档中读到继承不是正确的方法；好的方法是设计一个通用组件并通过组合对其进行专门化。

在我的顶级组件中，我想写如下内容：

<Form>
    <TextInput .../>
    <TextInput .../>
    <EmailInput .../>
</Form>

每种类型的输入基本上都必须做同样的事情：例如：根据它的验证器检查这个值，等等。

所以，我设计了一个通用组件FormInput，其中包含所有这些标准行为。当我编写 TextInput 组件时，它是这样的：

export default class TextInput extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <FormInput>
                <input name={this.props.name} 
                       type='text'
                       onChange={this.onChange}
                       onBlur={this.dirty}
                       value={this.state.value}
                />
            </FormInput>
        );
    }

}

现在，问题在于this.onChange 或this.dirty 是位于FormInput 组件中的标准行为，所以很明显，我不能像那样直接访问它们...

将转入的内容连接到其容器组件的正确方法是什么？

编辑

只是为了澄清和总结目标，我基本上想制作一个通用组件和一个嵌入的内容/模板。这个问题是我需要将特定的 DOM 模板（在特定组件中）绑定到通用处理程序（在通用组件中）。

提前致谢！

Answer 1

如果我理解正确，您的 onChange 和 dirty 方法是在 FormInput 组件中实现的。在这种情况下，input 元素应该放在组件的 render 方法中，而不是作为子元素传递。

FormInput 的渲染方法应该是这样的：

render(){
    return  <input name={this.props.name} 
                       type={this.props.type}
                       onChange={this.onChange}
                       onBlur={this.dirty}
                       value={this.state.value}
                />
}

FormInput 也应该有 name 和 type 属性才能以这种方式使用它：

 <FormInput name='A name' type='text' />

我猜，最初您试图传递一个包含其他 html 元素的输入。如果是这种情况，按照我的建议，您只需包装新的 FormInput 即可获得相同的结果。

更新：

要在 FormInput 组件中渲染其他类型的表单元素，如果您对条件渲染不满意，您可以尝试其他方式，在带有您的 type 属性的渲染中使用 createElement 方法。

更多信息在这里： Create Element

我以前使用过它，并且在我的项目中运行良好。

Answer 2

根据您的评论：

FormInput 必须托管所有标准内容，例如更改和验证。 TextInput 必须基本上只承载 html <input> 标记及其样式。

在我看来，您的层次结构似乎是错误的。
我将创建一个 Input 负责原始 input 的外观和 Form 负责嵌套 input 的行为方式以及它们保存的数据。

这是一个运行示例，显然你可以用其他方式设置它的样式，而不是内联样式。

const Input = ({ label, ...rest }) => (
  <div style={{ display: "flex" }}>
    <div style={{ display: "flex", alignItems: "center", margin: "10px 0" }}>
      <label style={{ minWidth: "100px", margin: "0 10px" }}>{label}</label>
      <input style={{ padding: "0.5em" }} {...rest} />
    </div>
  </div>
);

class Form extends React.Component {
  state = {
    fName: "",
    lName: "",
    age: null
  };

  onChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  onSubmit = e => {
    e.preventDefault();
    const { onSubmit } = this.props;
    onSubmit(this.state);
  };

  render() {
    const { fName, lName, age } = this.state;
    return (
      <form onSubmit={this.onSubmit}>
        <Input
          type="text"
          name="fName"
          label="First Name"
          value={fName}
          required
          onChange={this.onChange}
        />
        <Input
          type="text"
          name="lName"
          label="Last Name"
          value={lName}
          required
          onChange={this.onChange}
        />
        <Input
          type="number"
          name="age"
          label="Age"
          value={age}
          required
          onChange={this.onChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

function App() {
  return (
    <div>
      <Form onSubmit={data => console.log(data)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 3

我终于明白了！

这是我的解决方案：

export default class TextInput extends React.Component {

    constructor(props) {
        super(props);
    }

    template(state, formInput) {
        return (
             <input name={this.props.name} 
                    type='text'
                    onChange={formInput.onChange}
                    onBlur={formInput.dirty}
                    value={state.value}/>
        );
    }

    render() {
        return (
            <FormInput {...this.props} template={this.template} />
        );
    }

}

终于比预想的要容易了，不过我没用transclusion。

FormInput 组件托管所有内容，从状态到通用代码/行为（如 dirty 或 onChange）。

TextInput 组件仅实例化 FormInput 并托管一个名为 template 的函数，该函数采用远程状态和通用 FormInput 组件本身来访问其函数。

然后在FormInput，我有以下内容：

render() {
    return this.props.template(this.state, this);
}

通用输入组件调用template 函数并传入渲染所需的内容。

这样，我将视图与其行为分离。

希望你会喜欢它，并希望它对以后的人有所帮助；）