使用React Native的规范方法显然是使用JSX:
render: function() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Image source={{uri: movie.posters.thumbnail}} />
</View>
);
}
我怎么才使用JavaScript？通常在正常的React中,它React.createElement('div')可以作为JSX的替代品,但在尝试运行我的iOS React Native应用程序时,我收到错误"null不是函数".
我正在尝试用JSX标签替换字符串的一部分,如下所示:
render: function() {
result = this.props.text.replace(":",<div className="spacer"></div>);
return (
<div>
{result}
<div>
);
}
但考虑到this.props.text就是Lorem : ipsum,它导致
<div>
Lorem [object Object] ipsum.
</div>
有没有办法解决这个或其他方式用JSX标签替换字符串的部分？
我正在尝试使用我在React-Native中制作的通用导航组件.在调用时我想设置导航栏色调,标题等.
导航条形码:
var NavigationBar = React.createClass({
render: function(title, titleColor, NavBarColor) {
var titleConfig = {
title: title,
tintColor: titleColor,
};
return (
<NavBar
title={titleConfig}
tintColor={NavBarColor}
leftButton={<Button style={styles.menuButton}></Button>}
rightButton={<Button style={styles.menuButton}></Button>} />
);
}
});
将其应用于其他页面:
<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>
怎么做得好？提前致谢.
我正在开发的网站使用Microdata(使用schema.org).当我们将开发转移到使用React来渲染我们的视图时,我遇到了一个阻止程序,其中React只会在HTML规范中呈现属性,但Microdata指定了自定义属性,例如itemscope.
由于我是比较新的反应,还没有机会充分了解的核心,只是还没有,我的问题是什么将是扩展react.js的功能,允许自定义特性,例如,微观数据的最佳方式？
有没有一种扩展属性/道具解析器的方法,或者它是一个mixin的工作,它检查所有传递的道具并直接修改DOM元素？
(希望我们能够为每个人提供一个扩展,以便在解决方案明确时为此提供支持.)
我已经在其他几个组件中编写了这段代码,但似乎无法理解为什么这不起作用.
{
this.props.children.map(function(child) {
return <li>{child}</li>
})
}
任何帮助将不胜感激!
IntelliJ无法解析使用webpack要求的javascript模块,这些模块不在node_modules目录中
想象一下这个项目结构:
`- project
|- node_modules
| `- react
| `- addons.js
|- webpack.config.js
|- util
| `- tool.js
`- src
|- components
| `- uno.jsx
`- two.jsx
这是我的webpack配置
// webpack.config.js
var path = require('path');
module.exports = {
resolve: {
root: [
path.resolve('./src'),
path.resolve('./')
]
}
...
}
这就是我使用webpack的要求
// two.js
var React = require('react/addons');
var One = require('components/one');
var Tool = require('util/tool');
// dosomething
因此,这在我的应用程序中完美运行,IntelliJ看起来很满意'react/addons',如何理解导航,代码完成和'components/one'和'util/tool'的文档查找源代码？
我到目前为止尝试过:
但到目前为止没有运气.谢谢.
我错过了什么.这是一个非常简单的hello世界,目标是在onClick上发出一个警报事件.页面加载时会触发事件,但单击按钮时则不会触发.我很感激帮助.这是一个让它更容易看到的jsFiddle:jsFiddle
var Hello = React.createClass({
render: function() {
return <button onClick={alert("Hello World!")}>
Click Me
</button>;
}
React.render(<Hello />, document.getElementById('container'));
我刚刚开始使用React Native并习惯了JSX语法.这就是我在说什么？或者我在谈论TypeScript？或者...... ES6？无论如何...
我见过这个:
const { foo } = this.props;
里面有一个类功能.花括号的目的是什么,使用它们和不使用它们之间的区别是什么？
我为下表定义了一个类名(作为JSX的一部分).
<table class="table">
但是,一旦显示该类未在表上设置:
var SearchResult = React.createClass({
render: function(){
return (
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>...</tbody>
</table>
);
}
});
相反,表格显示<table data-reactid=".0.1.0.0">...</table>在Chrome中 - > inspect元素.
// This Javascript <a> tag generates correctly
React.createElement('a', {href:"mailto:"+this.props.email}, this.props.email)
但是,我正在努力在JSX中重新创建它
<a href="mailto: {this.props.email}">{this.props.email}</a>
// => <a href="mailto: {this.props.email}"></a>
href标记认为它{this.props.email}是一个字符串而不是动态输入值{this.props.email}.关于我去哪里的任何想法都不对？