小道具で見出しレベルを設定する

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

Yup！あなたのタグ変数を作るための方法は、次のようなある：Tagが大文字であることを

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

注意してください。 が必要ですタグ変数を大文字にすると、Reactはそれが通常の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> 
); 
}