在每个文件中，都有一组已定义Proptypes的组件将使用该文件中的组件。例如：
const Drafts = React.createClass({
propTypes: {
drafts: React.PropTypes.array.isRequired
},
mixins: [State, Navigation],
render() {
...
}
});
我要grep做什么？“草稿”？那是无效的。我还能如何找出store该变量来自哪个？
如何使用 JSX 内联样式指定自定义鼠标光标？
这工作正常：
<Component
style={{ cursor: 'crosshair' }}
/>
但我似乎无法得到任何类似的东西
<Component
style={{ cursor: 'url(images/special.cur)' }}
/>
上班。在其他地方，我成功地从同一位置获取静态图像
<img
src="images/example.png"
/>
所以我相信服务器设置正确。
我尝试过 Chrome、Firefox 和 IE 11。
我知道一定是在做一些根本错误的事情。我该怎么做呢？
非常感谢！
编辑
（StackOverflow 似乎不同意继续评论线程，所以让我将 Josh 的最新观点作为编辑来解决。）
是的，纯 HTML 元素获取自定义光标。我同意这一定是一个语法问题，但是在 JSX 中正确的语法是cursor: url(file)什么？这就是我想要弄清楚的。再次感谢！
<body>
<input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" />
<div id="container"></div>
...
</body>
在那里<input>获取我的特殊光标，而“容器”<div>是我的 React 组件被渲染的地方。
我也意识到我之前没有提到我在我的界面中使用 React-Bootstrap 组件。我知道 Bootstrap 添加了很多样式，但我认为在这种情况下它们不会“赢”，是吗？
jsx 的标准样式是什么？特别是当 HTML 与 js 交织在一起时。返回后的括号是否在正确位置？任何人都知道任何不会把一切都搞砸的好的格式化程序？
render: function(){
return (
<li>
<input id={this.props.id} type="checkbox" />
<label htmlFor={this.props.id}>{this.props.tag}</label>
</li>
);
}
假设我已经定义了一个组件：
class Co extends React.Component {
render = () => {
const name = this.props.name;
return (
<p>Hello, my name is {name}</p>
)
}
}
并将其存储在一个变量中：
const co = <Co />;
如何使用变量设置组件的道具？会co.props.set工作吗？
在编写反应代码时在 jsx 中编写 if-else 不起作用。
<div id={if (condition) { 'msg' }}>Hello World!</div>
但是使用三元运算符有效。
<div id={condition ? 'msg' : null}>Hello World!</div>
为什么会这样？
我正在尝试使用 Material-ui Card 组件将视频嵌入到我的页面中，如下所示：
const CardExampleWithAvatar = () => (
<Card>
<CardMedia
overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
>
<video>
<source src="https://www.youtube.com/watch?v=abcdef" type="video/mp4"/>
</video>
</CardMedia>
<CardTitle title="Card title" subtitle="Card subtitle" />
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
); …有人可以解释一下之间的区别吗
匿名函数
<button onClick={() => this.functionNameHere()}></button>
和
调用如下函数
<button onClick={this.functionNameHere()}></button>
以及何时使用其中之一（例如在不同的场景中使用一个而不是另一个）。
我是 React 开发新手我有一个项目，我必须在我的表上添加过滤器和排序功能，但我真的不知道从哪里开始。下面的模板：如何进行？
import * as React from 'react';
import { SPComponentLoader } from '@microsoft/sp-loader';
import styles from '../components/SearchSpfx.module.scss';
import { ISearchSpfxWebPartProps } from '../ISearchSpfxWebPartProps';
import * as moment from 'moment';
export interface ITableTemplate extends ISearchSpfxWebPartProps {
results: any[];
}
export default class TableTemplate extends React.Component<ITableTemplate, {}> {
private iconUrl: string = "https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/16/";
private unknown: string[] = ['aspx', 'null'];
private getAuthorDisplayName(author: string): string {
if (author !== null) {
const splits: string[] = author.split('|');
return splits[1].trim();
} else {
return …考虑这个不能编译的例子:
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div>Hello</div>;
}
});
var World = React.createClass({
render: function() {
return <div>World</div>;
}
});
var Main = React.createClass({
render: function() {
return (
<Hello />
<World />
);
}
});
React.renderComponent(<Main />, document.body);
但是这些组合中的任何一个都有效:
<div>
<Hello />
<World />
</div>
<Hello />
//<World />
//<Hello />
<World />
想知道是否应该总是用div标签包围多个组件.
我已经学习ReactJS几天了,但我常常在'/'应用程序页面中找到一个服务器错误,并没有真正指出在哪里锁定问题.例如,这是我现在得到的错误:
Server Error in '/' Application.
In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an enclosing tag (at line 106 column 58) Line: 52 Column:3
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: React.Exceptions.JsxException: In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an …react-jsx ×10
reactjs ×10
javascript ×5
jsx ×2
coding-style ×1
debugging ×1
material-ui ×1
store ×1