React JSXオブジェクトをどのように反復するか

Question

ExtendedComponentに<p>タグを追加したい場合は、super.render()を呼び出してください。問題は既に定義済みのjsxオブジェクトを変更できるかどうかわかりません。理想的には、parentTemplate + <p>Some paragraph</p>と書くだけですが、うまくいきません。

class BaseComponent extends React.Component { 
    get title() { 
    return 'I am base component'; 
    } 

    render() { 
    return <h1>Hello {this.title}</h1>; 
    } 
} 

class ExtendedComponent extends BaseComponent { 
    get title() { 
    return 'I am extended component'; 
    } 

    render() { 
    var parentTemplate = super.render(); 
    // append <p>Some paragraph</p> to parentTemplate 
    return parentTemplate; 
    } 
} 

ReactDOM.render(
    <ExtendedComponent />,  
    document.getElementById('test') 
); 

Answer 1

コメントに記載されているアジウムのように、これは反応とは一般的ではありません。あなたがそれを行う必要がある場合は、それがこのように達成することができます。

render() { 
    var parentTemplate = super.render(); 
    // append <p>Some paragraph</p> to parentTemplate 
    return <div>{parentTemplate}<p>Some paragraph</p></div>; 
} 

は、あなただけの1つの要素、それらのないリストを返すことができます反応する要素ので、divの内側にそれをラップする必要があります。 parentTemplateは他のjsxとまったく同じですが、変数に入っています。変数をJSXに追加するには、{variableName}構文を使用します。以上である

これを行うための別の方法として、様の「反応」：

class BaseComponent extends React.Component { 
    render() { 
    return <h1>Hello {this.props.title}</h1>; 
    } 
} 
BaseComponent.propTypes = { 
    title: React.PropTypes.string 
}; 
BaseComponent.defaultProps = { 
    title: 'I am base component' 
}; 

class ExtendedComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <BaseComponent title="I am extended component"/> 
     <p>Some paragraph</p> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <ExtendedComponent />,  
    document.getElementById('test') 
); 

JSFiddle

ここExtendedComponentは、高次の成分ではなく、BaseComponentから継承するものです。ほとんどの場合、これは理由が分かりやすい問題の分離であり、ほとんどの反応アプリは継承よりもこのように構築されています。

希望すると便利です。