Прикрепления реквизита на безгосударственноге функции из реквизита

Question

Я строй Реагировать компонент, который принимает в качестве компонента (PropTypes.func или PropTypes.element) через опору component={MyTemplate}, который будет служить в качестве шаблона, подобно как react-router делает определение маршрута.

Внутри компонента я хочу прикрепить опоры к элементу component. По документам я понимаю, что я так использую cloneElement, чтобы прикрепить реквизиты к нему.

class MyComponent extends Component { 
    // ... 

    render() { 
    const {component, blockProps} = this.props; 
    const body = cloneElement(component, blockProps); 

    return (
     <div className="sortable-block__body"> 
     {body} 
     </div> 
    ); 
    } 
} 

// later when rendering the component 
<MyComponent component={component} ... /> 

При визуализации компоненты Реагировать бросает Инвариантное нарушение:

неперехваченного Инвариантного Нарушение: Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класса/функция (для составных компонентов) но получил: undefined.

cloneElement Рассматривать функции без гражданства как ReactElement? Если нет, то как мне управлять добавлением реквизита компонента без гражданства?

Answer 1

element Тип опоры ожидает элемент, который будет как <MyTemplate /> - т. Е. С реквизитами. Но вы принимаете конструктор элемента (MyTemplate).

Кроме того, для создания экземпляра из конструктора, вам не нужно cloneElement, используйте синтаксис JSX вместо (и заглавного переменный):

const Component = this.props.component; 
const body = <Component {...blockProps} />