在每个文件中，都有一组已定义Proptypes的组件将使用该文件中的组件。例如：
const Drafts = React.createClass({
propTypes: {
drafts: React.PropTypes.array.isRequired
},
mixins: [State, Navigation],
render() {
...
}
});
我要grep做什么？“草稿”？那是无效的。我还能如何找出store该变量来自哪个？
我在Cordova项目中通过npm安装了font-awesome-webpack.我使用webpack创建一个bundle.js文件到我的/ www-folder.要使字体工作,我还必须将font-awesome-files构建到此文件夹.我的wepack.config.js:
module.exports = {
devtool: 'source-map',
entry: {
app: ["./src/main.jsx"]
},
output: {
path: path.resolve(__dirname, "dist/cwebphone/www"),
publicPath: "http://localhost:8088/",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
include: __dirname
},
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png"}},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
{
test: /\.jsx$/,
loaders: …我可以在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
但我正在寻找更清洁的反应类型.
如何使用 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 添加了很多样式，但我认为在这种情况下它们不会“赢”，是吗？
我想改变这个:
<Router history={browserHistory}>
<Route path='/' component={Layout}>
<Route path='signup' component={SignupPage} />
<Route path='assemblies/' component={AssemblyPages}>
<Route path='categories/' component={Categories}>
</Route>
</Route>
</Router>
至
import AssembliesRoute from './AssembliesRoute';
<Router history={browserHistory}>
<Route path='/' component={Layout}>
<Route path='signup' component={SignupPage} />
<AssembliesRoute />
</Route>
</Router>
//AssembliesRoute.js
export default class extends compondent {
render(){
return <Route path='assemblies/' component={AssemblyPages}>
<Route path='categories/' component={Categories}>
</Route>
}
}
基本上,我想将所有嵌套在程序集路由中的路由,并在程序集文件夹中的特定文件中处理它们,然后将这些路由返回到路由器.但是当我尝试这样做时,我找不到路线.这可能吗？
我的用例是我有一个Node应用程序,它使用来自CMS的数据,在那个CMS中我给用户提供了选择React Component作为"Layout"的能力.我希望Relay能够从动态选择组件中获取GraphQL片段.当布局的父组件安装时,它会遍历其查询并获取所需的布局组件并设置一个Relay变量 - 然后需要从该组件中获取一个片段.有没有办法做到这一点？
这是父级查询:
export default Relay.createContainer(WordpressPage, {
initialVariables:{
Component: null,
page: null,
showPosts: false,
limit: 5
},
prepareVariables(prevVars){
return{
...prevVars,
showPosts: true
}
},
fragments: {
viewer: ({Component, showPosts, limit}) => Relay.QL`
fragment on User {
${PostList.getFragment("viewer", {limit:limit}).if(showPosts)},
page(post_name:$page){
id,
post_title,
post_type,
post_content,
thumbnail,
layout{
meta_value
}
}
}
`,
},
});
如您所见,它查询并获取布局字段.安装时,它将Relay Component变量设置为React Component.而不是"PostList.getFragment",我真的希望能够做一个Component.getFragment.
我正在尝试执行以下操作:
<tbody>
{projects.map(function(project, i) { return (
<tr key={i}>
<td>
{project.id}
</td>
<td>
<a href='#/systemlist?projId={project.id}'>{project.name}</a>
</td>
</tr>
);} )}
</tbody>
应该使用路由器指向另一个组件.这一切都有效,除了{project.id}没有呈现为值.怎么做？href以外的所有其他工作都可以.
考虑这个不能编译的例子:
/** @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标签包围多个组件.
我想转换一个元素,因为它更改为另一个元素.
我有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"> …我理解如何在简单的情况下使用它:
{(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}
}
}
当然,它不起作用.怎么做正确？
reactjs ×9
react-jsx ×7
javascript ×3
react-router ×2
cordova ×1
font-awesome ×1
graphql ×1
relayjs ×1
store ×1
webpack ×1