Proses Tepkimesi ile Başlık Seviyesini Ayarlayın

Question

Sadece, sahne bileşenlerini ana bileşene kadar geçirerek yön seviyelerini ayarlamak için herhangi bir yol var mı diye merak ediyorum.

Örnek:

Taban Bileşen (Dikmeler Geçme)

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

Veli Bileşen

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

export default HomeHeader; 

Ben bir sözdizimi hatası olsun bu çalıştığınızda.

Answer 1

Yup! Lütfen etiket değişken hale getirmek için bir yol gibi geçerli: Tag büyük harfle

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

Bildirim söyledi. gereklidir Bir etiket değişkenini büyük harfle yazmanız yeterlidir, böylece React yalnızca normal bir HTML öğesi olmadığını anlar.

yüzden durumda, böyle bir şey yapabileceğini: (. Güvende olmanın ediyorsanız, bu yüzden this.props.headinglevel sadece 1-6 olabilir bazı çek eklemek isteyebilirsiniz)

---

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> 
); 
}