reactjs，如何通過課堂級別的道具

Question

這是我試圖做的一個例子。我想傳遞MyComponent類中的道具，而不使用<MyComponent hello={'Hello World'}/>，因爲我將MyComponent傳遞給其他一些庫。

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    render() { 
    const { hello } = this.props; 
    return (
     <div>{hello}</div> 
    ); 
    } 
} 

// this line is wrong 
MyComponent.props = { 
    hello: 'Hello World!' 
} 

<MyComponent /> 

react-redux如何連接以添加this.props.state並將任何其他函數映射到組件的道具？我想將自定義對象注入組件。

Answer 1

你需要創建一個Higher Order Component

function withMyObject(WrappedComponent,helloText) { 
    return class extends React.Component { 

    render() { 
     return <WrappedComponent {...this.props} hello={helloText} />; 
    } 
    }; 
} 

用法：

UpdatedComponent = withMyObject(ComponentToBeWrapped,"Hello"); 

Answer 2

您可以設置默認的道具。我認爲這是一個很好的做法。

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    render() { 
    const { hello } = this.props; 
    return (
     <div>{hello}</div> 
    ); 
    }headerProp: "Header from props...", 
    contentProp:"Content from props..." 
} 

MyComponent.defaultProps = { 
    hello: 'Hello World!' 
} 

<MyComponent />