react-jsx | 易学教程

How to render a string with JSX in React

阅读更多关于 How to render a string with JSX in React

问题 I need to render an HTML (JSX) string in a React class. I don't know if this is possible or not. dangerouslySetInnerHTML is not valid for me because I have different react components inside this file. It's not plain HTML. I have an example with the expected result: https://jsfiddle.net/86rg50re/1/ var MyComponent = React.createClass({ propTypes: { owner: React.PropTypes.string }, render: function() { return <div>Congrats {this.props.owner}! you have rendered MyComponent ({this.props.children}

How to slide <View/> in and out from the bottom in React Native?

阅读更多关于 How to slide in and out from the bottom in React Native?

问题 In React Native iOS, I would like to slide in and out a like to following in the picture. In the following example, when a button is pressed, the Payment Information view pops up from the bottom and when the collapse button is pressed, it goes back down and disappears. What would be the correct and proper way to go about doing so? Thank you in advance! EDIT 回答1: Basically, you need to absolute-position your view to the bottom of the screen. Then you translate its y value to equal its height.

ReactJS: onClick handler not firing when placed on a child component

阅读更多关于 ReactJS: onClick handler not firing when placed on a child component

I recently started working with ReactJS . Specifically, I am utilizing the react-rails ruby gem and react-bootstrap components. I have a question regarding placing onClick event listeners in child components. As you can see from the code sample below, I have a parent component that 'calls' a child component in its render function. Within that render function, I have React onClick listener that calls handleToggle when it is clicked. ###* @jsx React.DOM ### ToggleIconButton = React.createClass getInitialState: -> toggleOn: false handleToggle: (evt) -> this.setState(toggleOn: !this.state.toggleOn

Uncaught TypeError: this.state.data.map is not a function

阅读更多关于 Uncaught TypeError: this.state.data.map is not a function

问题 I am new to React, have seen some of the similar issues, but didn’t find why this happens. I am getting an “Uncaught TypeError: this.state.data.map is not a function”. Here is the code. Please, help to find what is the problem. class Audienses extends React.Component { constructor (props) { super(props); this.state = { data: '' }; this.loadFromServer = this.loadFromServer.bind(this); this.childeDelete = this.childeDelete.bind(this); this.childeEdit = this.childeEdit.bind(this); }

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

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

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 6 months ago . 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

Change language to JSX in Visual Studio Code

阅读更多关于 Change language to JSX in Visual Studio Code

Visual Studio Code now supports JSX on 0.8 version , but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact , but it doesn't parse the JSX tags. I'm in a project with a lot of .js files with JSX and I can't change it. Is there any other way to use JSX syntax without the .jsx extension? Dionys Change your user settings or workspace settings as below: // Place your settings in this file to overwrite the default settings { "files.associations": { "*.js": "javascriptreact" } } Note:

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

React/JSX dynamic component names

阅读更多关于 React/JSX dynamic component names

问题 I am looking to render a component based upon a string. Essentially, I am hoping to find the JSX equivalent to JavaScript's dynamic function name ability ( parent["childMethod"] ). So, if I have a string, such as "<MyComponent />" , how can I turn into JSX and render? 回答1: JSX is just a nice syntax for function calls, so you need to have the actual functions to use a component. If you have an object that contains React components then you can render a component based on a string property. For

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

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