我想转换一个元素,因为它更改为另一个元素.
我有3个例子:
我想要的更像是第二个,这是第一次尝试的微小变化.
选项1:
/** @jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1)
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<div><button onClick={this.handleAdd} /></div>
<ReactTransitionGroup transitionName="example"> …我正在一个具有本机CommonJS支持require模块的环境上开始一个新项目- 它是一个原子shell项目,不可能使用预编译步骤,如Browserify或webpack AFAIK.
我可以在我的声明的app.jsx入口点文件上使用JSX index.html,因为JSXTransformer之前声明过:
<script src="scripts/vendor/JSXTransformer.js"></script>
<script type="text/jsx" src="scripts/app.jsx"></script>
我希望能够将JSX语法用于在我的app.jsx模块中作为CommonJS模块导入的子模块:
// This raises an Error, the XML-like tags are not supported
var Grid = require('./scripts/grid.jsx');
据我所知,我将被迫删除JSX语法,并为任何加载的模块使用vanilla语法require.在这种情况下,还有其他方法可以使用JSX吗？
我理解如何在简单的情况下使用它:
{(this.state.show) ? <span>Show</span> : null}
但是如何将它用于大型DOM呢？
{ if (this.state.show) {
<span className={this.state.className}>Hi</span>
{this.state.text}
} else {
{this.state.text}
}
}
当然,它不起作用.怎么做正确？
我有一些代码给Regex一些文本并将其包装成<span />如下:
highlightQuery() {
// will output the text response from the Model, but also highlight relevant words if they match the search query
// that the user input
let input = this.props.model.get('value');
if(!this.state.hasMatch){
return input;
}
let query = this.props.matched.query,
index = this.props.model.get('searchIndexes')[this.props.matched.index];
const replaceBetween = (str, start, end, what) => {
return str.substring(0, start) + what + str.substring(start + end);
};
let ret = replaceBetween(input, index, query.length, `<span class='highlighted'>${query}</span>`);
return ret;
},
render() {
const classes …我正在尝试配置React Router,以便在访问http:// url/manage/roomId时直接转到http:// url/manage/roomId/sessions(加载RoomSessions组件).这些是标签组件的路由,我想默认使用正确的URL(它没有)加载第一个标签的内容(它所做的).
除重定向外,它工作正常
<Route path='manage/:roomId' component={RoomsManagerManageRoom} onEnter={requireAuth}>
<IndexRoute component={RoomSessions} onEnter={requireAuth} />
<Route path='sessions' component={RoomSessions} onEnter={requireAuth} />
<Route path='meetings' component={RoomMeetings} onEnter={requireAuth} />
<Route path='files' component={RoomFiles} onEnter={requireAuth} />
<Route path='recordings' component={RoomRecordings} onEnter={requireAuth} />
<Route path='sections' component={RoomSections} onEnter={requireAuth} />
<Route path='hosts' component={RoomHosts} onEnter={requireAuth} />
</Route>
我错过了什么？
假设我有以下JSX代码:
var List = React.createClass({
render: function() {
var Items = this.props.data.map(function(item) {
return (
<Item key={item.id}>
{item.text}
</Item>
);
});
return (
<div className="items">
{Items}
</div>
);
}
});
var Item = React.createClass({
handleDelete: function(e) {
e.preventDefault();
// Delete this (only this) component completely (remove it from DOM).
},
render: function() {
return (
<div className="item">
{this.props.children}
<button className="delete" onClick={this.handleDelete}>Delete</button>
</div>
);
}
});
ReactDOM.render(
<List data={Array of items} />,
document.getElementById('content')
);
我的问题是:项目如何在自己的handleDelete()函数中完全删除/删除自己？
这是一个非常简单的问题，但是我无法确定最干净的东西，也无法使其真正起作用。我在reactJS类中有此JSX部分，并想通过prop-value动态设置位置。我应该在以下代码段中添加哪个标记属性？我看过带有样式的示例，并尝试将左右设置等都没有成功。
任何帮助表示赞赏。
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />
我对reactjs很新,我遇到了一个场景,我要创建6个非常相似的输入字段.现在我在类的render方法中有这样的东西,
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.answer2}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer3"
id="answer3"
className="answer"
value={this.state.answer3}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer4"
id="answer4"
className="answer"
value={this.state.answer4}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer5"
id="answer5"
className="answer"
value={this.state.answer5}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer6"
id="answer6"
className="answer"
value={this.state.answer6}
onChange={this._handleChange}
/>
</p>
</div>
);
}
代码是丑陋和冗余的,无论如何,我可以动态地执行此操作吗？
我的简单反应代码是:
main.js:
var ReactDom = require('react-dom');
var Main = React.createClass({
render: function(){
return(
<div>
<a onClick={alert("hello world")} >hello</a>
</div>
)
}
});
在控制台中有一个错误:
TypeError:listener必须是一个函数
错误:
在运行此代码时,我正在获取该警报功能,而不是这应该是单击功能.
注意:我使用的是flux结构,但在给定的文件中没有填充数据.
提前致谢
我有在它超过10个字段一个反应基形式,我的状态对那些10个form字段(控制部件).
这些input字段中的大多数text仅为类型,但稍后将添加其他类型字段.
问题是我需要为它们编写10个更改处理程序以正确设置状态,然后在构造函数中为每个处理程序添加方法绑定.
我很反应,可能不了解正确的方法和技术.
请指导我如何改进我当前的代码结构,避免编写样板和重复的错误代码.
我目前的注册组件如下 -
export default class Register extends Component {
constructor(props){
super(props);
this.state = {
regName : '',
regAdd1 : '',
regAdd2 : '',
regState : '',
regZipCode : '',
regCity : '',
regPhone : ''
};
// add bindings .... ugh..
this.changeRegAdd1 = this.changeRegAdd1.bind(this);
this.changeRegAdd2 = this.changeRegAdd2.bind(this);
//Similary binding for other handlers...
}
// add individual field change handlers …react-jsx ×10
reactjs ×10
javascript ×6
commonjs ×1
electron ×1
flux ×1
jsx ×1
react-router ×1