react-jsx | 易学教程

React.js how to pass callbacks to child components?

阅读更多关于 React.js how to pass callbacks to child components?

I would like to pass a callback to a doubly nested component, and while I am able to pass the properties effectively, I can't figure out how to bind the callback to the correct component so that it's triggered. My structure looks like this: -OutermostComponent -FirstNestedComponent -SecondNestedComponent -DynamicallyGeneratedListItems The List Items when clicked should trigger a callback which is the OutermostComponents method "onUserInput", but instead I get "Uncaught Error: Undefined is not a function". I suspect the problem is in how I am rendering the SecondNestedComponent inside the first

Best way to build/compile/deploy ReactJS to production [closed]

阅读更多关于 Best way to build/compile/deploy ReactJS to production [closed]

I am new to reactJS, and am trying to understand what is the best way to deploy the code to production. As per the link below, I am building using babel as code below, but I was wondering if this is good, or are there any other best practices around deploying ReactJS to production: npm init -y npm install --save-dev babel-cli npm install --save-dev babel-preset-es2015 babel-preset-react babel --presets es2015,react --watch src/ --out-dir dist http://www.sitepoint.com/getting-started-react-jsx/ Here are my index.html and main.js files: index.html  <!DOCTYPE html> <html> <head

Trying to use React.DOM to set body styles

阅读更多关于 Trying to use React.DOM to set body styles

How can I use React.DOM to change styles on HTML body ? I tried this code and it's not working: var MyView = React.createClass({ render: function() { return ( <div> React.DOM.body.style.backgroundColor = "green"; Stuff goes here. </div> ); } }); If you execute this from the browsers console it works (but I need it working in ReactJS code): document.body.style.backgroundColor = "green"; Also see this question for similar but different solution: Change page background color with each route using ReactJS and React Router? yarden Assuming your body tag isn't part of another React component, just

Expected corresponding JSX closing tag for input Reactjs

阅读更多关于 Expected corresponding JSX closing tag for input Reactjs

问题 While creating a component in Reactjs with input fields error occurs Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div> var Main = React.createClass({ render: function() { return ( <div className="card-action"> <i class="mdi-action-account-circle prefix"></i> <input id="icon_prefix" type="text" class="validate"> </div> ); } }); 回答1: You need to close the input element with a /> at the end. <input id="icon

Using async setState

阅读更多关于 Using async setState

I have function which dispatched an action. I would like to display a loader before and after the action. I know that react composing the object passed to setState . the question is how can I update the property in async way: handleChange(input) { this.setState({ load: true }) this.props.actions.getItemsFromThirtParty(input) this.setState({ load: false }) } Basically, it all worked great if I put this property as part of the application state (using Redux), but I really prefer to bring this property to the component-state only. Wrap the rest of your code in the callback of the first setState :

How to correctly wrap few TD tags for JSXTransformer?

阅读更多关于 How to correctly wrap few TD tags for JSXTransformer?

I have an array with items and I want to make something like this: <tr> (until have items in array <td></td><td></td>) </tr> But if I do that, I get an JSXTransformer error : Adjacent XJS elements must be wrapped in an enclosing tag Working version: {rows.map(function (rowElement){ return (<tr key={trKey++}> <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td> <td className='info' key={td1stKey++}>{rowElement

What does JSX stand for?

阅读更多关于 What does JSX stand for?

问题 What does JSX stand for? I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS. 回答1: JSX stands for J ava S cript X ML. With React, it's an extension for XML-like code for elements and components. Per the React docs and as you mentioned: JSX is a XML-like syntax extension to ECMAScript without any defined semantics From the quote above, you can see that JSX doesn't have defined semantics

How to config ESLint for React on Atom Editor

阅读更多关于 How to config ESLint for React on Atom Editor

In Atom Editor I installed the following plugins linter linter-eslint It seems they don't recognize the JSX syntaxis. I have it working on the command line but had to use other plugins like esprima-fb and eslint-plugin-react . Looks like there are no such plugins for Atom Editor and would like to know if anyone of you knows a way to hack around this. To get Eslint working nicely with React.js: Install linter & linter-eslint plugins Run npm install eslint-plugin-react Add "plugins": ["react"] to your .eslintrc config file Add "ecmaFeatures": {"jsx": true} to your .eslintrc config file Here is

Is there a JSX formatter for sublime text?

阅读更多关于 Is there a JSX formatter for sublime text?

问题 I'm using Sublime Text as a text editor. There's a jsFormat for formatting javascript files but I can't find one for JSX. How you guys deal with formatting JSX? 回答1: Update 4 Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself) Update 3 Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is

Render a component from outside ReactJS

阅读更多关于 Render a component from outside ReactJS

From here : "The only way to get a handle to a React Component instance outside of React is by storing the return value of React.render." I need to render a React component outside React and the reason for it I'm going to mention below. In my node.js, expressJS app, I am using 'react-router-component' and 'react-async' . In app.js -the file which is supposed to be run , var url=require('url'); var App=require('./react/App.jsx'); var app = express(); app.get('*',function(req,res){ //}); SEE EDIT 1 BELOW var path = url.parse(req.url).pathname; ReactAsync.renderComponentToStringWithAsyncState(App