Heim >Datenbank >MySQL-Tutorial >[React] React Fundamentals: Accessing Child Properties

[React] React Fundamentals: Accessing Child Properties

WBOY
WBOYOriginal
2016-06-07 15:38:571506Durchsuche

When you're building your React components, you'll probably want to access child properties of the markup. Parent can read its children by accessing the special this.props.children prop. this.props.children is an opaque data structure: use

When you're building your React components, you'll probably want to access child properties of the markup.

 

Parent can read its children by accessing the special this.props.children prop.this.props.children is an opaque data structure: use the React.Children utilities to manipulate them.

https://facebook.github.io/react/docs/multiple-components.html

 

this.props.children undefined

You can't access the children of your component through this.props.children.this.props.children designates the children being passed onto you by the owner.

https://facebook.github.io/react/tips/children-undefined.html

 

Type of the Children props

Usually, a component's children (this.props.children) is an array of components. However, when there is only a single child, this.props.children will be the single child component itself without the array wrapper. This saves an array allocation.

https://facebook.github.io/react/tips/children-props-type.html

 

[React] React Fundamentals: Accessing Child Properties



    <meta charset="UTF-8">
    <title>React Lesson 6: Accessing Child Properties</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">



<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx">
    <span>/*<span>* @jsx React.DOM <span>*/

    <span>var App =<span> React.createClass({
        render: <span>function<span>(){
            <span>return<span> (
                    <BButton>I <BHeart> React<span>
            );
        }
    });

    <span>var BButton =<span> React.createClass({
       render: <span>function<span>() {
           <span>return<span> (
             <a className="btn btn-primary">{<span>this.props.children}
<span>           );
       }
    });

    <span>var BHeart =<span>
            React.createClass({
                render:<span>function<span>(){
                    <span>return <span className="glyphicon glyphicon-heart">
<span>                }
            });


    React.render(<App />, document.body);
</script>

 

App has two children BButton and BHeart, all thoes chilren come thought from {this.props.children}.

 

If you don't have {this.props.children}:

    <span>var</span> BButton =<span> React.createClass({
       render: </span><span>function</span><span>() {
           </span><span>return</span><span> (
             </span><a classname="btn btn-primary">No passed <span>in</span>!</a>
<span>           );
       }
    });</span>

We end up with this: [React] React Fundamentals: Accessing Child Properties

 

[Notice:] Just remeber when give class to the render elements, we need to use 'className' not 'class'.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:DBNächster Artikel:配置Oracle10g即时客户端plsql的配置