react-jsx | 易学教程

JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

阅读更多关于 JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

问题 I updated to typescript to version 2.1.6 from version 1.6 and the typings for react to version 15.0.15. If I compile the typescript files via gulp or tsc everything is working fine and there are no error messages. However Visual Studio 2017 RC as well as Sublime Text complain about the typescript code. Here is some of my code. This does not produce any errors. interface CounterDisplayProps { loading: boolean; first: number; last: number; total: number; } class CounterDisplay extends React

Pull data from IndexedDB into array and output it via ReactJS

阅读更多关于 Pull data from IndexedDB into array and output it via ReactJS

问题 My actual Javascript code is the following: var schoolsData = new Array(); myDB.schools .each(function(school) { console.log('"' + school.title + '" wird auf den Array gepusht.'); schoolsData.push(new Array(school.title, schools.schoolnumber, school.address, school.principal, school.email, school.creationdate, school.lastupdate, school.comment)); }); var SchoolsRender = React.createClass({ render: function() { return ( <tr> {this.props.list.map(function(listValue){ return <td>{listValue}</td>

Get access to array in JSON by ReactJS

阅读更多关于 Get access to array in JSON by ReactJS

问题 I use ReactJS to get data from a JSON file <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Demo Fetch</title> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx"> var DataBlock = React

JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

阅读更多关于 JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

I updated to typescript to version 2.1.6 from version 1.6 and the typings for react to version 15.0.15. If I compile the typescript files via gulp or tsc everything is working fine and there are no error messages. However Visual Studio 2017 RC as well as Sublime Text complain about the typescript code. Here is some of my code. This does not produce any errors. interface CounterDisplayProps { loading: boolean; first: number; last: number; total: number; } class CounterDisplay extends React.Component<CounterDisplayProps, {}> { render() { var { props } = this; return ( <div className="Counter">

How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?

阅读更多关于 How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?

问题 Here is the code in ES5 in which the jsx is written into a separate file import React from 'react'; import Template from './template.jsx'; const DetailElement = React.createClass({ render: Template }); export default DetailElement; enter code here template.jsx file will be like this import React from 'react'; const render = function() { return ( <div>Hello World</div> ); }; export default render; How can I write the same using ES6 Classes ? Or any other solution is available to do this

Difference between anonymous function vs named function as value for an object key

阅读更多关于 Difference between anonymous function vs named function as value for an object key

问题 I have compiled JSX to JavaScript using Babel compiler. Here is the piece of code I'm intrigued with. getInitialState: function getInitialState() { //List out different states that ListComponent could possibly have return { showList: true, listType: this.props.type After compiling JSX to JS, getInitialState is a named method getInitialState(). I couldn't figure out why it isn't a anonymous method. Original code: getInitialState: function() { //List out different states that ListComponent

How can i create input text fields dynamically in react js - JSX?

阅读更多关于 How can i create input text fields dynamically in react js - JSX?

问题 I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my render method of class, render () { return ( <div> <p> <label htmlFor="answer1">Answer:</label><br/> <input type="text" name="answer1" id="answer1" className="answer" value={this.state.answer1} onChange={this._handleChange} /> </p> <p> <input type="text" name="answer2" id="answer2" className="answer" value={this.state

Is there any way of using JSX in a native CommonJS environment?

阅读更多关于 Is there any way of using JSX in a native CommonJS environment?

问题 I'm starting a new project on an environment that has native CommonJS support for require modules - it's an atom-shell project, there is no possibility of using pre-compiling steps such as in Browserify or webpack AFAIK . I'm able to use JSX on my app.jsx entry-point file that is declared on my index.html , that's because JSXTransformer was declared previously: <script src="scripts/vendor/JSXTransformer.js"></script> <script type="text/jsx" src="scripts/app.jsx"></script> I want to be able to

Pass this.refs as property in jsx in React.js

阅读更多关于 Pass this.refs as property in jsx in React.js

问题 I'm trying to pass 1 node as a property of another React component like this: render: function() { return ( <div> <div ref='statusCircle'></div> <Popover trigger={ this.refs.statusCircle }></Popover> </div>); ); } But in the Popover, this.props.trigger is NULL. Is there anything wrong with my code? How can I pass a node-ref to another React component as property? 回答1: After typing this I realized it's really not an answer to the original question but instead a follow-up to your request for

How to conditionally add closing and starting JSX tags

阅读更多关于 How to conditionally add closing and starting JSX tags

问题 I have never been able to figure out how to conditionally close off an existing JSX tag and start a new one without getting syntax errors in Visual Studio. How is this done? In the example below, I want to split an existing table into two tables. I don't get any syntax errors if I remove the conditional code. <table> <thead> ... </thead> {true ? </table> /* Close first table (Syntax error on this line because of no starting tag) */ <table> /* Create a new table by splitting the existing table