प्रॉप्स के साथ शीर्षक स्तर सेट करें

Question

बस सोच रहा है कि आधार घटक को प्रोपस पास करके शीर्षक स्तर सेट करने के लिए वैसे भी है या नहीं।

उदाहरण:

बेस घटक

class Heading extends Component { 
render() { 
    return (
    <h{this.props.headinglevel} className={this.props.titleStyle}> 
     {this.props.title} 
    </h{this.props.headinglevel}> 
); 
} 
} 
export default Heading; 

जनक घटक (प्रॉप्स पासिंग)

class HomeHeader extends Component { 
render() { 
    return (
     <Heading headinglevel="1" titleStyle="big-header" title="Hello World" /> 
) 
} 
} 

export default HomeHeader; 

जब मैं यह कोशिश मैं एक वाक्य रचना त्रुटि मिलती है।

Answer 1

यूप! अपने टैग एक चर बनाने के लिए जिस तरह से इस तरह के रूप में है:

render() { 
    const Tag = 'h1'; 
    return <Tag>{/* some code here */}</Tag>; 
} 

सूचना है कि Tag अक्षर बड़ा है। यह आवश्यक आप एक टैग वैरिएबल को कैपिटल करते हैं तो प्रतिक्रिया समझती है कि यह केवल एक सामान्य HTML तत्व नहीं है।

तो अपने मामले में, आप की तरह कुछ कर सकता है: (। आप सुरक्षित किया जा रहा है कर रहे हैं, तो आप ऐसा this.props.headinglevel केवल 1-6 हो सकता है कुछ की जांच जोड़ सकते हैं)

render() { 
    const Tag = 'h' + this.props.headinglevel; // make sure this has a default value of "1" or w/e 
    return (
    <Tag className={this.props.titleStyle}> 
     {this.props.title} 
    <Tag> 
); 
} 

---