Menu
I've component wrapper for Bootstrap Panel:
var Panel = React.createClass({
render: function () {
return (
<div className="panel panel-default">
<div className="panel-heading">
<div className="panel-title">
{this.props.title}
</div>
</div>
<div className="panel-body"></div>
</div>
);
}
});
How to output to "panel-body" tag "h1" and component "AvailableActions" on example what you can see below?
var PlayerActions = React.createClass({
render: function () {
return (
<Panel title="Actions">
<h1>Some description here...</h1>
<AvailableActions></AvailableActions>
</Panel>
);
}
});
788
In React we can access the child's state using Refs. we will assign a Refs for the child component in the parent component. then using Refs we can access the child's state. Creating Refs Refs are created using React.
To pass data from a child component to its parent, we can call a parent function from the child component with arguments. The parent function can be passed down to the child as a prop, and the function arguments are the data that the parent will receive.
You can also pass events like onClick or OnChange Just call an alert method in the childToParent function and pass that function as a prop to the child component. And in the child component, accept the childToParent function as a prop. Then assign it to an onClick event on a button. That's it!
Seems you need this.props.children
var Panel = React.createClass({
render: function () {
return (
<div className="panel panel-default">
<div className="panel-heading">
<div className="panel-title">
{this.props.title}
</div>
</div>
<div className="panel-body">{ this.props.children }</div>
</div>
);
}
});
Example
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
