html Hello React - 复合组件 - 访问childern。 JsFiddle：http：//jsfiddle.net/gh/gist/library/pure/1345be9f312

Posted 2021-05-11

- When you're building your React components, you'll probably want to access child properties of the markup.
this.props.children accesses the innerHTML or nested components of another component.

name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - composite components - accessing childern.
authors:
  - Ryan Vice
resources:
  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0

var HelloMessage = React.createClass({
    render: function() {
        return <h2>{this.props.message}</h2>;
    }
});

var Button = React.createClass({
   render: function() {
       return <button onClick={this.props.onClick}>{this.props.children}</button>
   }
});

var GlyphIcon = React.createClass({
   render: function() {
       return <span className={'glyphicon glyphicon-' + this.props.icon}></span>
   }
});

var TextBox = React.createClass({
    getInitialState: function() {
        return { isEditing: false, text: this.props.label }
    },
    update: function() {
        var value = React.findDOMNode(this.refs.messageTextBox).value;
        this.setState(
            {
                isEditing: false
            });
        this.props.update(value);
    },
    edit: function() {
        this.setState({ isEditing: true});
    },
    render: function() {
        return (
            <div>
              {this.props.label}<br/>
                <input type='text' ref='messageTextBox' disabled={!this.state.isEditing}/>
                {
                    this.state.isEditing ?
                        <Button onClick={this.update}><GlyphIcon icon='ok'/> Update</Button>
                        :
                        <Button onClick={this.edit}><GlyphIcon icon='pencil'/> Edit</Button>
                    }
            </div>
        );
    }
});

var HelloReact = React.createClass({
    getInitialState: function () {
        return { firstName: '', lastName: ''}
    },
    update: function(key, value) {
        var newState = {};
        newState[key] = value;
        this.setState(newState);
    },
    render: function() {
        return (
            <div>
                <HelloMessage
                    message={'Hello ' + this.state.firstName + ' ' + this.state.lastName}>
                </HelloMessage>
                <TextBox label='First Name' update={this.update.bind(null, 'firstName')}>
                </TextBox>
                <TextBox label='Last Name'
                    update={this.update.bind(null, 'lastName')}>
                </TextBox>
            </div>
        );
    }
});

ReactDOM.render(
    <HelloReact/>,
    document.getElementById('view'));

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
 
<div id="view"/>