Question

我正在学习HOC，我有一个问题，在这种情况下如何获得props在HOC中。

withRainbow.js（HOC）

import React from 'react';

const withRainbow = (WrappedComponent) => {
    const colors = ['red', 'blue', 'orange'];
    const randomColor = colors[Math.floor(Math.random() * 3)];
    const className = randomColor + '-text';

    return ( props ) => {
        return (
            <div className={className}>
                <WrappedComponent {...props}/>
            </div>
        )
    };
}

export default withRainbow;

About.jsx

import React from 'react';
import withRainbow from '../hoc/withRainbox';

const About = () => {
    return ( 
        <div className="container">
            <h4 className="center">About</h4>
            <p>This is about yay!</p>
        </div>
     );
}

export default withRainbow(About);

即使props中的return (props) => ...没有参数{{1}，如何通过withRainbow.js中的回调withRainbow(About)获取About.jsx }？
如果props有About.jsx，我也可以在state中得到它吗？

Answer 1

如何通过回调返回（props）获取道具=> ... 即使About.jsx中的withRainbow（About）没有争论道具？

withRainbow(About)返回一个新组件，如果您在渲染时将道具传递给它，则可以像在withRainbow HOC事件中一样访问道具，尽管您没有在About组件中访问道具。 / p>

const AboutWithRainbow = withRainbow(About);
...
return (
   <AboutWithRainbow abc={'2433'} />
)

如果About.jsx具有状态，我也可以在Rainbow.js中得到它吗？

否，您不应该访问父级中子级组件的状态。如果是这种情况，则必须提升状态

Answer 2

有一个困惑，因为您看错了方向。

函数接收的道具不是来自要导出为withRainbow(About)的子组件。

它来自调用withRainbow(About)的父组件

// In about component.
const AboutWithRainbow = withRainbow(About);

// In parent component
<AboutWithRainbow {...propsFromParent} />

这些是HOC组件中收到的道具。

这也回答了第二个问题。不，因为data flows down，所以您无法将状态作为参数。

在这种情况下如何获得道具？

2 个答案: