使用调用者组件的相同道具

Question

我的代码的目标是让properties中的InputGroup.js可用于最低级别组件this.props中的TextInput.js, Checkbox.js，依此类推。

为此，我创建了一个名为InputComponent.js的非常简单的组件，我在这里做的是创建this.prpt并为其分配this.props，以便可以使用它而不是this.props中的TextInput.js。

我似乎很冗长，我认为有更好的方法，但我想知道是否有更好的方法来做到这一点。

在坚果壳中，我想使用this.props，on TextInput.js而不是this.props.properties或this.props.data。

InputGroup.js

InputGroup.js适用于与传入input_type值对应的组件。

import React, { Component } from 'react';
import {INPUT_TYPES as T} from './constants';
import {TextInput, CheckboxInput, SelectInput, MobileInput, DateInput, SnsAuthInput} from '.';

class InputGroup extends Component {

    constructor(props){
        super(props);
    }

    render() {
        let input_type = this.props.type;
        let switcher = {
            [T.TEXT]: TextInput,
            [T.CHECKBOX]: CheckboxInput,
            [T.SELECT]: SelectInput,
            [T.MOBILE]: MobileInput,
            [T.DATE]: DateInput,
            [T.SNSAUTH]: SnsAuthInput
        }
        let TagName = (input_type < Object.keys(switcher).length) ? switcher[(input_type)] : undefined;
        if (TagName) {
            return <TagName properties={this.props} />
        }
        return <div></div>
    }
}

InputComponent.js

import React, { Component } from 'react';

class InputComponent extends Component {

    constructor(props){
        super(props);
        this.prpt = this.props.properties;
    }
}

export default InputComponent ;

TextInput.js

import React, { Component } from 'react';
import InputComponent from './InputComponent';

class TextInput extends InputComponent {
    constructor(props) {
        super(props);
    }
    render() {
        let {input_id, text, isRequired, error} = this.prpt;
        return (
            <div className="input-group input-text">
                <label htmlFor={input_id} className="blind">{text}</label>
                <input type="text" id={input_id} placeholder={text} required={isRequired}/>
                <span className="id-error">{error}</span>
            </div>
        );
    }
}

export default TextInput ;

[编辑] 我认为我的问题标题没有描述这一点，所以我纠正了它。

[编辑] 现在我明白了这一点，所以我更正标题并添加众所周知的解决方案。

```

InputGroup.js - 编辑

class InputGroup extends Component {

    constructor(props){
        super(props);
    }

    render() {
        let input_type = this.props.type;
        let switcher = {
            [T.TEXT]: TextInput,
            [T.CHECKBOX]: CheckboxInput,
            [T.SELECT]: SelectInput,
            [T.MOBILE]: MobileInput,
            [T.DATE]: DateInput,
            [T.SNSAUTH]: SnsAuthInput
        }
        let TagName = (input_type < Object.keys(switcher).length) ? switcher[(input_type)] : undefined;
        if (TagName) {
            return <TagName {...this.props} />
        }
        return <div></div>
    }
}

Answer 1

我认为你正在寻找类似的东西。

<Parent propX={x} propY={y} />
  <Child {...props} />