Questions tagged «jsx»

有什么方法可以在Visual Studio Code中使用组件或HTML补全吗？因为当我们有类似Bootstrap等的类时，手动键入每个字母不是一个好主意。例如Emmet中的完成：ul>li*2>a var React = require('react'); var Header = React.createClass({ render: function () { return ( <nav className="navbar navbar-defaullt"> <div className="container-fluid"> <a href="/" className="navbar-brand"> <img width="50" height="50" src="images/logo.png" alt="logo" /> </a> <ul className="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/#about">About</a></li> </ul> </div> </nav> ); } }); module.exports = Header;

78 reactjs  autocomplete  visual-studio-code  jsx  emmet 

我的index.js中有以下代码段 class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } 该代码有效，但是每次我保存（ctrl + s）visual studio格式的jsx时，就像这样： class App extends Component { render() { return ( < div style = { styles.app } > Welcome to React! < /div> …

78 reactjs  visual-studio-code  jsx 

我希望创建一个无状态组件，其input元素可以由父组件验证。 在下面的示例中，我遇到了一个问题，即输入ref从未分配给父级的私有_emailAddress属性。 何时handleSubmit调用，this._emailAddress是undefined。是否有我缺少的东西，或者有更好的方法来做到这一点？ interface FormTestState { errors: string; } class FormTest extends React.Component<void, FormTestState> { componentWillMount() { this.setState({ errors: '' }); } render(): JSX.Element { return ( <main role='main' className='about_us'> <form onSubmit={this._handleSubmit.bind(this)}> <TextInput label='email' inputName='txtInput' ariaLabel='email' validation={this.state.errors} ref={r => this._emailAddress = r} /> <button type='submit'>submit</button> </form> </main> ); } private …

77 reactjs  typescript  jsx 

我正在尝试在示例应用程序中设置react-router，但出现以下错误： You should not use <Link> outside a <Router> 我的应用程序设置如下： 父组件 const router = ( <div className="sans-serif"> <Router histpry={browserHistory}> <Route path="/" component={Main}> <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}></Route> </Route> </Router> </div> ); render(<Main />, document.getElementById('root')); 子/Main组件 export default () => ( <div> <h1> <Link to="/">Redux example</Link> </h1> </div> ) 知道我在做什么错吗？ 这是一个沙盒链接来演示该问题。

77 reactjs  react-router  jsx 

Import_this import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native'; 这是我的React Button代码，但是样式无法正常运行... <Button onPress={this.onPress.bind(this)} title={"Go Back"} style={{color: 'red', marginTop: 10, padding: 10}} /> 我也尝试过此代码 <Button containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}} style={{fontSize: 20, color: 'green'}} onPress={this.onPress.bind(this)} title={"Go Back"} > Press me! </Button> 更新问题： 我也尝试过这种方式.. <Button onPress={this.onPress.bind(this)} title={"Go Back"} style={styles.buttonStyle} >ku ka</Button> …

74 reactjs  react-native  jsx  react-native-button