javascript - 你如何在 react 中调用另一个组件中的组件？

Question

我正在尝试制作一个表单，如果您按下一个按钮，您会从另一个组件获得另一个表单。 到目前为止没有运气

/**
 * @jsx React.DOM
 */
'use strict';
var React = require('react');
//var CompetenceActions = require('../actions/CompetenceActions.js');
var Alert = require('react-bootstrap/Alert');
var ReactPropTypes = React.PropTypes;
var KeybehaviourComponent = require('./KeybehaviourComponent.js');

var CompetenceComponent = React.createClass({
    /* jshint ignore:start */
    render:function(){
        return(
            <div>
                <div>
                    <p>
                        Competence Name: <input type='text' id='competencename'  onChange={this._onChangeName} autoFocus={true}/><br/>
                        Competence Description: <input type='textarea'  id='competencedescription'  onChange={this._onChangeDescription}/>
                    </p>
                </div>
                <div>
                    <button onClick={this.addKeybehaviour}>Add Keybehaviour</button>
                </div>
                <div>
                    <p>
                        <button onClick={this.submitForm}>submit</button>
                    </p>
                </div>
            </div>
        );
    },
    /* jshint ignore:end */

    getInitialState:function(){
        return ({
            competenceName: '' ,
            competenceDescription: ''
        });
    },

    _onChangeName: function(/*object*/ event) {
       this.setState({
         competenceName: event.target.value
       });
    },

    _onChangeDescription: function(/*object*/ event) {
        this.setState({
            competenceDescription: event.target.value
        });
    },
    /* jshint ignore:start */
    addKeybehaviour:function(){
        return (
            <div>
                <KeybehaviourComponent/>
            </div>
        );
    },
    /* jshint ignore:end */

    submitForm:function(){
         console.log(this.state.competenceName);
         console.log(this.state.competenceDescription);
         //CompetenceActions.createCompetence(competenceName, comptenceDescription);
         //this.setState({competenceNameValue: this.props.competenceName, competenceDescriptionValue: event.target.comptenceDescription});
    }
});

module.exports = CompetenceComponent;

这是我创建表单、渲染它并在按下按钮时调用另一个表单的第一个组件'

/**
 * @jsx React.DOM
 */
'use strict';
var React = require('react');
//var CompetenceActions = require('../actions/CompetenceActions.js');
var Alert = require('react-bootstrap/Alert');
var ReactPropTypes = React.PropTypes;

var KeybehaviourComponent = React.createClass({
    /* jshint ignore:start */
    render:function(){
        return(
            <div>
                <div>
                    Keybehaviour Name: <input type='text'  defaultValue='name' id='keybehaviourname'  onChange={this._onChangeName} autoFocus={true}/>
                </div>
                <div>
                    Keybehaviour Description: <input type='text' defaultValue='description' id='keybehaviourdescription'  onChange={this._onChangeDescription}/>
                </div>
            </div>
        );
    },
    /* jshint ignore:end */

    getInitialState:function(){
        return ({
            keybehaviourName: '' ,
            keybehaviourDescription: ''
        });
    },

    _onChangeName: function(/*object*/ event) {
        this.setState({
            keybehaviourName: event.target.value
        });
    },

    _onChangeDescription: function(/*object*/ event) {
        this.setState({
            keybehaviourDescription: event.target.value
        });
    }
});

module.exports = KeybehaviourComponent;

这是组件调用

Answer 1

您不能只在 onClick 中返回一个 React 组件。我会尽力帮助您开始解决方案。你应该在 addKeybehaviour 函数中做这样的事情:

var newAmount = this.state.currentAmount + 1;
this.setState({currentAmount: newAmount});

现在，在 CompetenceComponent 的渲染函数中，尝试执行如下操作:

var keyboardComponents = [];
for (i = 0; i <= this.state.currentAmount; i++) {
    keyboardComponents.push(<KeybehaviourComponent />)
}

现在只需将 {keyboardComponents} 放在返回函数的某处。希望这能让您入门。