如何在反应中使用自定义可重用组件作为输入字段

Question

我在这里创建了一个可重用组件，负责创建输入字段和标签。我想在整个过程中使用此组件来构建一个完整的表单，该表单具有单行两列（使用此自定义输入字段）

我使用以下代码

Form.jsx
    <GridRow>
      <InputField type="text"label="First Name"/>
       <InputField type="text"label="Last Name" />
    </GridRow>

GridRow.jsx
    
    render() {
            return (
                <div>
                    <Container>
                        <Row>
                            <Col sm={6}>  
                            {this.props.children}
                            </Col>
                            <Col sm={6}>
                            {this.props.children}
                           </Col>
                        </Row>
                    </Container>
                </div>
            );

Inputfield.jsx
    const InputField = ({label, type}) => (
        <div>
          {label}
            <input
                type={type}     
                style={{ padding: "4px", border: "none", borderBottom: "1px solid #ccc", width: "90%"}}
            />
        </div>
    );

这里 Form.jsx 使用 GridRow.jsx 作为组件，它有一个子组件 inputfield.jsx 我希望同一行中的两列不同。

我得到以下输出

以下是所需的输出。我怎样才能得到这个输出

如图中第一行

Answer 1

我认为你应该试试这个：

form.jsx：

<Row>
<Col><input /></Col>
<Col><input /></Col>
</Row>

grdiRow.jsx：

<Container>
{this.props.child}
</Container>