Questions tagged «react-jsx»

我试图找到定义可以以一般方式使用的组件的正确方法： <Parent> <Child value="1"> <Child value="2"> </Parent> 当然，您可以想象<select>并<option>作为父本子组件之间的渲染逻辑。 对于这个问题，这是一个虚拟的实现： var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); 问题是，每当您用于{this.props.children}定义包装器组件时，如何将某些属性传递给其所有子组件？

887 javascript  reactjs  react-jsx 

我有一个外部（组件），可观察的对象，我想听这些更改。当对象被更新时，它发出更改事件，然后我想在检测到任何更改时重新呈现该组件。 对于顶层，React.render这是可能的，但是在组件内不起作用（这是有道理的，因为该render方法仅返回一个对象）。 这是一个代码示例： export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } 在内部单击该按钮会调用this.render()，但这实际上并不是导致渲染发生的原因（您可以看到它在起作用，因为由创建的文本{Math.random()}不会更改）。但是，如果我只是打电话this.setState()而不是this.render()，它就可以正常工作。 所以我想我的问题是： React组件是否需要具有状态才能重新渲染？有没有一种方法可以在不更改状态的情况下强制组件按需更新？

685 reactjs  react-jsx 

我知道您可以在React类中指定样式，如下所示： var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); 我是否应该以这种方式进行所有样式设置，并且在CSS文件中完全没有指定样式？ 还是应该完全避免使用内联样式？ 两者兼而有之，似乎很奇怪而且很乱-在调整样式时需要检查两个位置。

511 css  reactjs  inline-styles  react-jsx 

我正在阅读的“ 表单”部分reactjs文档，并尝试使用此代码演示onChange用法（JSBIN）。 var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); 当我<input/>在浏览器中更新值时，回调console.log内的第二个与第一个handleChange相同，为什么在回调范围内看不到的结果？valueconsole.logthis.setState({value: event.target.value})handleChange

326 javascript  reactjs  react-jsx 

我有一个相对简单的问题，试图将内联脚本添加到React组件。到目前为止，我有： 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script> </article> …

264 javascript  reactjs  ecmascript-6  react-jsx 

如何在JSX中选择性地包含元素？这是一个使用横幅的示例，如果已传递该横幅，则该横幅应位于组件中。我要避免的是必须在if语句中复制HTML标签。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); }

229 javascript  reactjs  react-jsx 

我正在用React构建一些东西，我需要在JSX中插入带有React变量的HTML。有没有办法像这样一个变量： var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; 并像这样将其插入反应中并起作用？ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 并按预期插入HTML吗？我还没有看到或听到任何有关可以内联执行此操作的react函数的信息，也没有听说过任何使该功能起作用的解析方法。

203 javascript  html  frontend  reactjs  react-jsx 

我正在尝试根据组件的类型动态呈现组件。 例如： var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> 我尝试了这里提出的解决方案React / JSX动态组件名称 这给我一个编译时的错误（使用browserify进行gulp）。我使用数组语法的地方应该是XML。 我可以通过为每个组件创建一个方法来解决此问题： newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } 但这将意味着为我创建的每个组件提供一种新方法。必须对此问题有一个更优雅的解决方案。 我很乐意提出建议。

167 javascript  reactjs  react-jsx 

我正在尝试将jQuery组件转换为React.js，而我遇到的困难之一是基于for循环渲染n个元素。 我了解这是不可能的，也不建议这样做，并且在模型中存在数组的地方使用它完全有意义map。很好，但是当您没有数组时该怎么办？取而代之的是，您拥有一个等于要渲染的给定元素数量的数值，那么您应该怎么做？ 这是我的示例，我想根据元素的层次结构级别为元素添加任意数量的span标签。因此，在第3级，我要在text元素之前添加3个span标签。 在javascript中： for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); 我似乎无法得到这个，或者与JSX React.js组件中的工作类似的东西。相反，我必须执行以下操作，首先将临时数组构建为正确的长度，然后循环该数组。 React.js render: function() { var tmp = []; for (var i = 0; i < this.props.level; i++) { tmp.push(i); } var indents = tmp.map(function (i) { return ( …

145 javascript  jquery  reactjs  react-jsx 

我刚刚开始通过添加带有简单渲染功能的组件来探索React： render() { return <div class="myApp"></div> } 运行应用程序时，出现以下错误： Warning: Unknown DOM property class. Did you mean className? 我可以通过更改class为解决此问题className。 问题是; React是否执行此约定？另外，为什么我需要使用它className而不是传统方法class？如果这是一个限制，那是由于JSX语法还是其他原因？

113 javascript  reactjs  react-jsx 

我正在尝试开始在ReactJS中构建网站。但是，当我尝试将JS放在单独的文件中时，我开始收到此错误：“ Uncaught SyntaxError：Unexpected token <”。 我尝试添加/** @jsx React.DOM */到JS文件的顶部，但没有解决任何问题。以下是HTML和JS文件。关于出什么问题有什么想法吗？ 的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"> </script> </head> <body> <div id="content"></div> <script type="text/jsx"> React.render( <Lander />, document.getElementById('content') ); </script> </body> </html> JS /** * @jsx React.DOM */ var Lander = React.createClass({ render: function () …

110 javascript  html  reactjs  react-jsx 

我有一个要运行的文件test_stuff.js npm test 它看起来像这样： import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); }); }); …

102 javascript  reactjs  npm  react-jsx 

我正在使用Sublime Text作为文本编辑器。 有一种用于格式化JavaScript文件的jsFormat，但是我找不到用于JSX的格式。 你们如何处理JSX格式？

91 reactjs  sublimetext  react-jsx 

我知道如何（以及为什么）在JSX中添加空格，但是我想知道什么是最佳实践，或者是否有什么真正的区别？ 将两个元素包装在一起 <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> 一行添加 <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> 用JS添加空间 <div className="top-element-formatting"> Hello {" "} <span className="second-word-formatting">World!</span> </div>

91 javascript  reactjs  react-jsx 

我想绑定以在escape按下时关闭活动的反应引导弹出窗口。这是代码 _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, 但是，当我按任意键时，控制台中都不会记录任何内容。我也尝试在窗口上以及不同情况下使用'keypress'，'keyup'等来收听，但似乎我做错了。

82 reactjs  react-jsx  react-bootstrap