React HOC 函数不会将 props 传播到 html 元素中

Question

我得到了简单的样本。 我想将任何组件传递给一个函数并使用设置背景获取它。 与React.createElement组件一起工作正常，但不适用于 html 组件。

 const Title = ({ children }) => { return (<h1 data-this-works="test">{children}</h1>) } const Box = ({ children, ...rest }) => { return React.createElement('span', rest, children) } const styleComponent = BaseComponent => ({children, ...props}) => { const style = {backgroundColor: 'green'} return ( <BaseComponent style={style} {...props} > {children} </BaseComponent> ); } const StyledTitle = styleComponent(Title) const StyledBox = styleComponent(Box) class App extends React.Component { render() { return ( <div> <StyledTitle>Title</StyledTitle> <StyledBox>Box</StyledBox> </div> ) } } ReactDOM.render(<App />, 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>

https://jsfiddle.net/Constantinff/g357tfv9/8/

Answer 1

Title不会将任何道具传播到h1 。 Box起作用是因为您将rest作为React.createElement的道具React.createElement - 您需要对h1执行相同的操作。

 const Title = ({ children, ...rest }) => { return (<h1 data-this-works="test" {...rest}>{children}</h1>) } const Box = ({ children, ...rest }) => { return React.createElement('span', rest, children) } const styleComponent = BaseComponent => ({children, ...props}) => { const style = {backgroundColor: 'green'} return ( <BaseComponent style={style} {...props} > {children} </BaseComponent> ); } const StyledTitle = styleComponent(Title) const StyledBox = styleComponent(Box) class App extends React.Component { render() { return ( <div> <StyledTitle>Title</StyledTitle> <StyledBox>Box</StyledBox> </div> ) } } ReactDOM.render(<App />, 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>