CODEWITHSUNDEEP
javascripthtmlreactjs
Digital Human
Digital Human

Reputation: 1637

React JS pass class as variable

I want to create something like below in ReactJS but i can't figure out how and I most definitly don't want to use DangerouslySetInnerHTML. It's just a stupid example but i hope it makes clear what i want. Thanks for helping me out!

var page = {
    title: <ReactTitle title={this.props.page.name} />
    name: "Me myself and I"
};

var ReactTitle = React.createClass({
    render: function(){
        return (
            <h1>{this.props.title}
        );
    }
})
var NewPage = React.createClass({
    render: function(){
        return (
            <div className="row">
                {this.props.page.title}
                <div className="page-header"><h1>{this.props.page.name}</h1></div>
            </div>
        );
    }
})

React.render(
    <NewPage page={page} />
);

Upvotes: 1

Views: 1155

Answers (2)

Digital Human
Digital Human

Reputation: 1637

My solution, with thanks to @Alexander

//Example
var page1 = {
    title: [
        React.createElement("h1", "", "This is my page title");
        React.createElement("div", {className:"page-header"}, "This is the header of page 1");
    ],
    name: "Me myself and I"
};
//So page2, which is slidely different:
//Example
var page2 = {
    title: [
        React.createElement("h2", {className:"h2"}, "Title part",
            React.createElement("span", {className:"silent"}, "Silent part of page title")
        ),
        React.createElement("div", {className:"page-header"}, "This is the header of page 2");
    ],
    name: "Me myself and I"
};

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can use React.createElement, like so 

var page = {
    title: React.createElement(ReactTitle, {title: "My awesome Title"}),
    name: "Me myself and I"
};

Example

But in my opinion better use ReactTitle inside NewPage, like so 

<div className="row">
  <ReactTitle title={this.props.page.title} /> 
  <div className="page-header"><h1>{this.props.page.name}</h1></div>
</div>

Example

Upvotes: 2

Related Questions