jsx | 易学教程

React - Uncaught TypeError: Cannot read property 'func' of undefined

阅读更多关于 React - Uncaught TypeError: Cannot read property 'func' of undefined

问题 I'm receiving the error: Uncaught TypeError: Cannot read property 'func' of undefined Yet I have no idea why, I've Googled the error and gone to everyone post with the same error yet no luck. Can anyone help me out? I'm using react-router@3.0.2 index.jsx import React from 'react'; import ReactDOM from 'react-dom'; import { Router, browserHistory } from 'react-router'; import { Helmet } from 'react-helmet'; import Routes from './config/routes'; ReactDOM.render( <div> <Helmet> <meta charSet=

React - Uncaught TypeError: Cannot read property 'func' of undefined

阅读更多关于 React - Uncaught TypeError: Cannot read property 'func' of undefined

How can I write an else if structure using React (JSX) - the ternary is not expressive enough

阅读更多关于 How can I write an else if structure using React (JSX) - the ternary is not expressive enough

问题 I want to write the equivalent in react: if (this.props.conditionA) { <span>Condition A</span> } else if (this.props.conditionB) { <span>Condition B</span> } else { <span>Neither</span> } So maybe render() { return (<div> {(function(){ if (this.props.conditionA) { return <span>Condition A</span> } else if (this.props.conditionB) { return <span>Condition B</span> } else { return <span>Neither</span> } }).call(this)} </div>) } But that seems overly complex. Is there a better way? 回答1: Why do

How do I add attributes to existing HTML elements in TypeScript/JSX?

阅读更多关于 How do I add attributes to existing HTML elements in TypeScript/JSX?

问题 Anyone know how to properly add/extend all native HTML element attributes with custom ones? With the TypeScript documentation for merging interfaces, I thought that I could just do this: interface HTMLElement { block?: BEM.Block; element?: BEM.Element; modifiers?: BEM.Modifiers; } <div block="foo" />; // error But I get the following Intellisense error in vscode 1.6.1 (latest): [ts] Property 'block' does not exist on type 'HTMLProps'. The HTMLProps to which they are referring is React

How to comment jsx code out in .js files in VSCode?

阅读更多关于 How to comment jsx code out in .js files in VSCode?

问题 Unlike in webstorm, I'm unable to comment jsx code out in .js files in Visual Studio Code. 回答1: You can comment out JSX by {/**/} Example : render() { return ( <div> <Component1 /> {/* <Component2 /> */} </div> ) } and then Component2 would be commented out 回答2: Try to disable all plugins, because they can change editor's behaviour. For example if use Babel ES6/ES7 plugin, editor comments .jsx syntax by // instead of {/* . You see see the issue here. 回答3: In Visual Studio code Hit Cmd + / if

Visual studio code changes format (React-JSX)

阅读更多关于 Visual studio code changes format (React-JSX)

问题 I've the following snippet in my index.js class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } The code works, but every time I save (ctrl+s) visual studio format the jsx like that: class App extends Component { render() { return ( < div style = { styles.app } > Welcome to React! < /div> ) } } How can I solve this? thanks 回答1: In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom

How can I attach to a stateless component's ref in React?

阅读更多关于 How can I attach to a stateless component's ref in React?

问题 I am looking to create a stateless component who's input element can be validated by the parent component. In my example below, I am running into a problem where the input ref is never being assigned to the parent's private _emailAddress property. When handleSubmit is called, this._emailAddress is undefined . Is there something I'm missing, or is there a better way to do this? interface FormTestState { errors: string; } class FormTest extends React.Component<void, FormTestState> {

Why is 'position: sticky' not working with Core UI's Bootstrap CSS

阅读更多关于 Why is 'position: sticky' not working with Core UI's Bootstrap CSS

问题 I am trying to build a react dashboard using Core UI's react template found here. CSS .top-stick { position: sticky !important; position: -webkit-sticky; top: 5rem; overflow-y: auto; height: calc(100vh - 5rem); } JSX <div className="animated fadeIn"> <Row className="app-scrollable-body"> <Col xs="12" sm="4" md="3" className="top-stick"> <Card className="toic"> <CardBody> Lorem ipsum dolor sit amet </CardBody> </Card> </Col> <Col xs="12" sm="8" md="9"> <Card> <CardHeader>Card title</CardHeader

Why is 'position: sticky' not working with Core UI's Bootstrap CSS

阅读更多关于 Why is 'position: sticky' not working with Core UI's Bootstrap CSS

Facebook React.js库入门实例教程

阅读更多关于 Facebook React.js库入门实例教程

作者：阮一峰日期： 2015年3月31日现在最热门的前端框架，毫无疑问是 React 。上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到