Как написать HO C в реакции, которая занимает еще один ho c?

Question

Я изучаю пользовательский интерфейс материала самостоятельно и наткнулся на этот шаблонный метод HO C с API-интерфейсом Style HO C, я попытался реализовать сам с простым стилем (просто строка), чтобы понять, как это ho c (withStyle) функция принимает это ho c (названо HigherOrderComponent) функция работает в коде. это приложение. js и отображение <App/> в индексе. js

import React from 'react';
import customWithStyle  from './customWithStyle';
import Button from '@material-ui/core/Button';


function HigherOrderComponent(props) {

  return <Button color={props}>Higher-order component</Button>;

}


const someStyle="primary";
export default customWithStyle(someStyle)(HigherOrderComponent);

И код, который я пытался написать, находится в customWithStyle. js файл

 import React from 'react'
 const customWithStyle=(style)=>(Hoc)=>{
          //console.log(style);
         console.log(<Hoc/>)
         return  <Hoc props={style}/>
 }


export default customWithStyle ;

Я получаю сообщение об ошибке

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Может кто-нибудь помочь.

Answer 1

Единственный способ, которым я использую Ho c, был с классом. Нечто подобное поможет вам

function HigherOrderComponent(props) {
   return (<div style={{color: props.color}}>this is the main component</div>)
}

const customWithStyle = style => WrappedComponent => {
	class HOC extends React.Component{
  	    render = () => (<WrappedComponent color={style}></WrappedComponent>);
        }
  
	return HOC;
};

const StyledComponent = customWithStyle("red")(HigherOrderComponent);

ReactDOM.render(<StyledComponent />, document.querySelector("#app"))

<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="app"></div>

Answer 2

Используйте props.props в функциональном компоненте HigherOrderComponent для значения атрибута цвета в компоненте «Материал кнопки»