使用呼叫者組件的相同道具

Question

我的代碼的目標是使最低級別的組件TextInput.js, Checkbox.js中的InputGroup.js可以使用this.props中的properties 。

為此，我創建了一個非常簡單的名為InputComponent.js組件，在這里要做的是創建this.prpt並將this.props分配給它，以便可以代替TextInput.js的this.props使用它。

我似乎很冗長，我認為有更好的方法，但是我想知道是否有更好的方法可以做到這一點。

this.props ，我想on 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} />