Question

所以我一直在尝试将当前的HTML页面抽象到React中。我不确定为什么，但它证明给我带来了很多麻烦。有人能帮我走上正轨吗？以下是我尝试抽象到组件中的代码示例。

<nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-header">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
</nav>

当我尝试抽象时，这就是我想出来的。

<div id="header">
<script>
    var HeaderComponent = React.createClass( {
        render: function() {
            return (

            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-healer">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
            </nav>

        )
    }  
})
ReactDOM.render(<HeaderComponent />, document.querySelector('#header'))
</script> 
</div>

但问题是，该组件无法呈现并且不显示任何内容。

Answer 1

试试这个：

connect(ui->button,SIGNAL(pressed()),this,SLOT(showWindow2()));

// Slot
void Window1::showWindow2()
{
    Window2*cal = new Window2();
    cal->show();
}

React会将其渲染到div中。您不需要在div中包含脚本标记

Answer 2

首先，您需要设置您的reactjs项目。

我建议您按照这些关于使用NPM，Webpack和Babel安装reactjs项目的简短教程：https://medium.com/@fastlane80/setup-react-js-with-npm-babel-6-and-webpack-in-under-1-hour-1a714f973506。

当然，你会发现另一篇文章正在谈论＆＃34;如何从Reactjs开发＆＃34;开始，但它也非常好。我建议你开始阅读Get started with ReactJS。无论如何，我更喜欢在开发JS时使用类概念。像这个示例：

＆＃13;

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
	class AppComponent extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				name: '',
				helloPhrase: 'Hello sr(a) '
			}
		}
		onTextChange(e) {
			this.setState({name: e.target.value});
		}
		sayHello() {
			let hello = this.state.helloPhrase + this.state.name + '.';
			this.setState({helloPhrase: hello});
		}
		render() {
			const styles = {
				button: {
					with: 50,
					backgroundColor: '#80bfff',
					color: 'white',
					marginLeft: 8
				}
			};

			return (
				<div>					
						<p>Insert your name to get hello:</p>
						<div>
							<input type="text" onChange={this.onTextChange.bind(this)}/>
							<button type="button" onClick={() => this.sayHello()} style={styles.button}>Greet me!</button>
						</div>
						{this.state.helloPhrase.trim() != 'Hello sr(a)' ? 
							<p>{this.state.helloPhrase}</p>
						: null}						
					</div>
			)
		}  
	}
	ReactDOM.render(<AppComponent />, document.getElementById('app'))
</script> 
</body>

＆＃13;

您可以开始修改这个非常简单的示例，以了解ReactJS和ES6，ES7等的一些基本概念（非常有用）以及reactjs的工作原理。

我希望它可以帮助你的旅程！

Answer 3

Code pan of your code

你必须在html文件中写标题div。在你的代码中，结尾div没有正确关闭。

 <div id="header"></div>


<script>
    var HeaderComponent = React.createClass( {
        render: function() {
            return (

            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-healer">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
            </nav>

        )
    }  
})
ReactDOM.render(<HeaderComponent />, document.querySelector('#header'))
</script>

将静态HTML抽象为React

3 个答案: