react-jsx | 易学教程

How to render a HTML comment in React?

阅读更多关于 How to render a HTML comment in React?

问题 Currently the render method can only return a single element/component. See: here In the discussion under that ticket some suggest to wrap multiple elements returned from a React component in a HTML comment so that the wrapping component is ignored by the browser, e.g.: <A> <B></B> <Fragment> <C></C> <D></D> </Fragment> <E></E> </A> would render to: <a> <b></b>  <c></c> <d></d>  <e></e> </a> But how to actually create a component that renders

How do I convert a string to jsx?

阅读更多关于 How do I convert a string to jsx?

问题 How would I take a string, and convert it to jsx ? For example, if I bring in a string from a textarea , how could I convert it to a React element; var jsxString = document.getElementById('textarea').value; What is the process I would use to convert this on the client? Is it possible? 回答1: You can consider using the JSX attribute dangerouslySetInnerHTML Example usage below: class YourComponent{ render() { someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>' return( <div

Highlight text using ReactJS

阅读更多关于 Highlight text using ReactJS

问题 I'm trying to highlight text matching the query but I can't figure out how to get the tags to display as HTML instead of text. var Component = React.createClass({ _highlightQuery: function(name, query) { var regex = new RegExp("(" + query + ")", "gi"); return name.replace(regex, "<strong>$1</strong>"); }, render: function() { var name = "Javascript"; var query = "java" return ( <div> <input type="checkbox" /> {this._highlightQuery(name, query)} </div> ); } }); Current Output: <strong>Java<

True custom attributes (e.g. Microdata) in React

阅读更多关于 True custom attributes (e.g. Microdata) in React

问题 The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope . As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e

Render Content Dynamically from an array map function in React Native

阅读更多关于 Render Content Dynamically from an array map function in React Native

问题 I'm trying to get data from an array and using map function to render content. Look at **{this.lapsList()}** and the associated **lapsList()** function to understand what I'm trying to do. The result is nothing is displaying (Views under view, etc.) Here is my simplified code: class StopWatch extends Component { constructor(props) { super(props); this.state = { laps: [] }; } render() { return ( <View style={styles.container}> <View style={styles.footer}> <View><Text>coucou test</Text></View>

Which ReactJS syntax to use; React.createClass or ES6 extends?

阅读更多关于 Which ReactJS syntax to use; React.createClass or ES6 extends?

问题 I'm beginner of ReactJS. I learned and studied a lot of documents and ebooks on various websites. I realize there are two syntaxes for ReactJS. Example: React.createClass({ displayName: 'Counter', getDefaultProps: function(){ return {initialCount: 0}; }, getInitialState: function() { return {count: this.props.initialCount} }, propTypes: {initialCount: React.PropTypes.number}, tick() { this.setState({count: this.state.count + 1}); }, render() { return ( <div onClick={this.tick}> Clicks: {this

ReactJS: “Uncaught SyntaxError: Unexpected token <”

阅读更多关于 ReactJS: “Uncaught SyntaxError: Unexpected token

I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: "Uncaught SyntaxError: Unexpected token <". I tried adding /** @jsx React.DOM */ to the top of the JS file, but it didn't fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong? HTML <html> <head> <title>Page</title> <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script> <script src="./lander.js"> <

How to manually trigger click event in ReactJS?

阅读更多关于 How to manually trigger click event in ReactJS?

问题 How can I manually trigger a click event in ReactJS ? When a user clicks on element1, I want to automatically trigger a click on the input tag. <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div> 回答1: You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as

Conditional Rendering in React js

阅读更多关于 Conditional Rendering in React js

问题 I have added a condition in rendering and suddenly it stops displaying. Here is the code am using. {this.state.sdata.map((sdata, i) => {i < 5 && <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> } ) } I want to display only 4 items from sdata. Anybody please help. 回答1: You forgot to return the element from map body, as well as you need to return null for all the entries of array after i >= 5 . Write it like this: {this.state.sdata.map((sdata, i) => { if(i < 5) return

Formatting code with <pre> tag in React and JSX

阅读更多关于 Formatting code with tag in React and JSX

问题 I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn't format at all. Why? In order to use the pre tag I need to do something like this: const someCodeIWantToFormat = "var foo = 1" const preBlock = { __html: "<pre>" + pythonCode + "</pre>" }; return( <div dangerouslySetInnerHTML={ preBlock } />; ) Why? 回答1: Use template literals Template literals allow the use of multi-line strings which preserve leading/trailing white-space and new lines. class SomeComponent