因此，我正在将我们正在处理的网站的内部样式指南从常规 html 切换为使用 reactjs。我有示例代码，并且我正在使用 Prism.js 突出显示。突出显示似乎工作正常，但换行符不行。即使在每一行后放入 br 标签也没有效果。有没有人对此有任何想法？只是一些示例代码：
var Example = React.createClass({
render: function() {
return (
<div class="highlight">
<pre>
<code class="language-markup">
<label class="select">
<select class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
</code>
</pre>
</div>
);
}
});
React.render(<Example />, document.getElementById('example'));
当它呈现时，它看起来像这样。
<label class="select"><select class="selector"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></label>
但我希望它看起来像这样：
var Example = React.createClass({
render: function() {
return (
<div class="highlight">
<pre>
<code class="language-markup">
<label class="select">
<select class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option …我目前正在关注这个视频教程，但我坚持使用简单的 HelloWorld 应用程序。在时间位置12m:31s是我卡住的地方它应该显示HelloWorld但它没有。
该应用程序使用 SystemJs、React 和 JSX。
要创建应用程序，请在终端中执行以下步骤（需要节点和 jspm）：
npm init（enter对所有人）jspm init（enter几乎所有人，除了使用 babel）jspm install fetch=npm:whatwg-fetchjspm install reactmain.js并将我的代码复制到其中index.html到根目录。我认为问题是我的本地服务器。我用 nodejs 运行它，http-server我认为 JSX 没有转换为 JS。也提到的serve服务器不工作。
我在浏览器控制台中收到此错误消息：
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <
我如何使它工作？
这是我的代码，正是视频中的代码（它不会在这里运行，因为没有添加 js 文件）：
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token < …我在这里尝试在 ReactJS 中制作组件以创建弹出窗口，但在 react-with-addons.js 中出现此错误：
错误：不变违规：_registerComponent(...)：目标容器不是 DOM 元素。
这是我的代码：
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="react-0.13.3/build/react-with-addons.js"></script>
<script type="text/javascript" src="react-0.13.3/build/JSXTransformer.js"></script>
<script type="text/javascript" src="react-router/lib/umd/ReactRouter.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title>WS-JAVA-REST</title>
<style>
.row { padding-top: 10px; }
</style>
</head>
<body>
<!-- contenu -->
<div id="content">
<script type="text/jsx" src="test.js"></script>
</div>
</body>
</html>
Javascript
/** @jsx React.DOM */
var clicked = function(){
mountedPopup.setState({visible: true, pretendStateChanged: Date.now() });
mountedComponent.setState({pretendStateChanged: Date.now() }) ;
}
var popupClicked …我正在尝试阅读React Tutorial，但发生了一个我不明白的错误。
错误消息是：
comment.tsx(30,5): error TS2324: Property 'data' is missing in type 'MyProps'.
comment.tsx(31,5): error TS2324: Property 'data' is missing in type 'MyProps'.
main.tsx(20,17): error TS2324: Property 'author' is missing in type 'MyProps'.
main.tsx(27,18): error TS2324: Property 'author' is missing in type 'MyProps'.
这是main.tsx：
import * as React from 'react';
import 'jquery';
import { CommentList, CommentForm, MyProps } from './comment';
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: …是否有 api 可以从Activity类中调用方法？我需要调用finish()我的应用程序，但在文档中找不到任何相关内容。
更具体地讲，我想finish()的MainActivity从我的index.android.jsx，当特定TouchableHighlight被按下。
[更新]
现在我finish()从我的 NativeModule公开一个方法，但也许有更好的方法来做到这一点。
我试图更好地缩进我的 JSX，但我在组件之间丢失了一个空格。例如
<span>Saved: { this.props.fetchedTitle + ' ' }
<AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />{' '}
<BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>
请注意在 fetchedTitle 和 AjaxButton 之后插入的手动空格。如果我将所有内容都塞到一行中，并且组件之间有空格，则会为我插入空格。当我把东西分成多行时，空格不见了，迫使我手动添加它，即使我在换行之前或之后手动插入一个空格。
有没有解决的办法？（这个 ui 只是一个粗略的原型/探索性练习 - 最终可能会有一个更健壮的布局，但我仍然想了解为什么 React 以这种方式响应 jsx）
我可以在React JSX中使用dangerouslySetInnerHTML来清理字符串吗？要求是检查已清理的html字符串的长度,然后仅包括该组件.就像是
var SomeComponent = React.createClass({
render:function(){
return (
{this.props.htmlString.length > 0 ? <Child htmlString={this.props.htmlString} : null}
)
}
})
var Child = React.createClass({
render:function(){
return (
<p dangerouslySetInnerHTML={{__html: this.props.htmlString}}></p>
)
}
})
一切正常,但失败了this.props.htmlString=' '.在这种情况下,长度> 0并且包括组件.所以我想在元素包含本身之前检查innerHTML的长度.
我遇到的一个可能的解决方案是:
var html = " ";
var div = document.createElement('div');
div.innerHTML = html; //check the length of innerHTML now
但我正在寻找更清洁的反应类型.
目前我在一本书的帮助下学习React Native,其中解释了如何构建一个应用程序.但是由于这个错误/错误,我无法继续.这是在IOS中发生的,不确定这是否也发生在Android上,因为我还没有设置我的Android模拟器只是喷射.
我的<View>容器有两个<TextInputs>,工作正常.当我将两个输入都包装到视图中时,它们只是"消失".
这是我的组件NoteScreen.js:
import React, {
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={styles.body}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: …我试图制作指南针,但我不知道如何使用磁力计的数据.
这是我的班级指南针:
class Compass extends Component {
constructor(props) {
super(props);
}
componentWillMount(){
this._animeRotation = new Animated.Value(0);
}
componentDidMount() {
this.startAnimation();
}
startAnimation() {
Animated.timing(this._animeRotation, {
toValue: this.props.magn, //<-- What put here?
duration: 1000,
}).start(() => {
this.startAnimation();
});
}
render() {
var interpolatedRotateAnimation = this._animeRotation.interpolate({
inputRange: [0, 100],
outputRange: ['0deg', '360deg']
});
return (
<View>
<Animated.View style={[styles.box, {transform: [{rotate: interpolatedRotateAnimation}]}]}>
<Image style={styles.box} source={require('./arrow.png')}></Image>
</Animated.View>
</View>
);
}
}
这是类App:
class App extends Component {
constructor(props) {
super(props);
this.state = { …我用以下代码找到了对问题的一个很好的答案:
var condition = true;
return (
<Button {...condition ? {bsStyle: 'success'} : {}} />
);
为什么......需要？如果我省略它,babel抱怨我:
repl: Unexpected token, expected ...
它看起来像扩展语法,但是condition是一个布尔值.我找不到解释发生了什么的文档.
react-jsx ×10
javascript ×7
reactjs ×7
react-native ×3
android ×1
babeljs ×1
ecmascript-6 ×1
ios ×1
jquery ×1
popup ×1
prism.js ×1
systemjs ×1
typescript ×1