关于react复合组件。如何让几个组件组成一个大组件。最好能给我一个复制了就能运行的案例。。详细点解释下能行吗

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>react.js</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>    
      <script src="js/browser.min.js"></script>
      
     
    </head>
    <body>
        <div id="container">
            
        </div>
        <script type="text/babel">
        var GenderSelect = React.createClass({
        render: function() {
        return <select onChange={this.props.handleSelect}>
        <option value="0">男</option>
        <option value="1">女</option>
        </select>
    }
})
var SignupForm = React.createClass({
    getInitialState: function() {
        return {
            name: '',
            password: '',
            gender: '',
        }
    },
    handleChange: function(name, event) {
        var newState = {}
        newState[name] = event.target.value
        this.setState(newState)
    },
    handleSelect: function(event) {
        this.setState({gender: event.target.value})
    },
    render: function() {
        console.log(this.state)
        return <form>
        <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />
        <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />
        <GenderSelect handleSelect={this.handleSelect}></GenderSelect>
        </form>
    }
})
    ReactDOM.render(<SignupForm></SignupForm>, document.body);
    
    
        </script>
    </body>
</html>

我觉得你首先要搞清楚一个React组件的基本结构，其实你可以搞清楚因为React结构很清晰清楚，那么一个基本的React结构搞清楚了复合组件就是一个组件嵌套多个组件，当然需要你按需嵌套，建议你只使用ES6标准去看去写React组件，不然你就会蒙掉，因为React组件的写法很多，如果你有精力也完全可以去比较ES5与ES6的不同写法，但这么说请不要觉得React变化多端，因为React也一直在不断改版，希望能帮到你认识这些

你这里有一个SignupForm组件，假如你又写了一个SigninForm组件。然后你想把两个合在一起。那你就可以写一个Sign组件。

var sign = React.createClass({
    ......
    ......
    render: function () {
        return (
            <SignupForm />
            <SigninForm />
        )
    }});

【热门文章】