Как связать объекты React JSX

Question

Я хочу добавить тег <p> в ExtendedComponent, позвонив по телефону 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>; 
} 

Вы должны обернуть его внутри 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. В большинстве случаев это разделение проблем, о которых легче рассуждать, и большинство реагирующих приложений построены таким образом, а не наследования.

Надеюсь, это поможет!