我想我在概念上缺少使用 React.js 进行服务器端渲染的东西
假设我想创建一个页面来显示来自服务器端数据库的项目，并带有一个输入字段来过滤它们。
我想要一个页面：
- 响应像这样的 URL
/items?name=foobar - 使用 React 输入字段按名称过滤项目
- 使用 React 组件显示过滤项目列表
假设我有一个公共 REST API 来查询客户端的项目。
从概念上讲，我想在第一次请求（GET /items?name=foobar）时做的是：
- 我希望我的输入字段显示用户作为参数传递的内容，因此我需要将查询参数（'foobar'）作为'prop'（如
initialName）传递给反应组件
所以我尝试了这个：
// A stateful component, maintaining the value of a query field
var ItemForm = React.createClass({
getInitialState : function () {
return {
name : this.props.initialName
};
},
handleInputValueChanged : function() {
var enteredName = this.refs.query.getDOMNode().value.trim();
this.props.onNameChanged(enteredName);
},
render : function () {
return React.DOM.form({
children : [
React.DOM.label({
children : "System name"
}),
React.DOM.input({
ref : "query",
value : this.state.name,
onChange : this.handleInputValueChanged
})
]
});
}
});
- 我还必须在服务器上进行数据库查询以获取项目列表，并将此项目列表作为 ItemList 的“prop”（如“initialItems”）传递
据我了解，我需要一个简单的组件来显示列表，并将其作为“道具”接收：
// A stateless component, displaying a list of item
var ItemList = return React.createClass({
propTypes : {
items : React.PropTypes.array
},
render : function () {
return React.DOM.ul({
children : _.map(this.props.items, function (item) {
return React.DOM.li({
children : [
React.DOM.span({
children : ["Name : ", item.name].join(" ")
})]
});
})
});
}
});
- 现在，我需要一个组件来显示整个 Page ；该组件将不得不维护整个页面的状态，即查看字段中输入的名称，并进行 API 查询以更新列表项。但是我不明白这个组件如何具有一个“initialState”，它既可以在服务器端工作，也可以在以后在客户端呈现。
我试过这个：
// A stateful react component, maintaining the list of items
var ItemPage = React.createClass({
getInitialState : function () {
// ?????
// This is where I'm sure the problem lies.
// How can this be known both on server and client side ?
return {
items : this.props.initialItems || []
};
},
queryItems : function (enteredName) {
var self = this;
// The field was emptied, we must clear everything
if (!enteredName) {
this.setState({
items : []
});
} else {
// The field was changed, we want to do a query
// then change the state to trigger a UI update.
// The query code is irrelevant, I think.
doQuery(enteredName).then(function (items) {
self.setState({
items : items
});
});
}
},
render : function () {
// I don't want to display the same view
// if there is no results.
// This uses a 'state' property of the page
var results = null;
if (_.isEmpty(this.state.items)) {
results = React.DOM.div({
ref : "results",
children : "No results"
});
} else {
results = ItemListView({
// Here items is a 'prop', the ItemList is technically
// stateless
items : this.state.items
});
}
return React.DOM.div({
children : [
ItemForm({
initialName : this.props.initialName,
onNameChanged : this.queryItems
}),
results
]
});
}
});
这就是我卡住的地方。我可以使用类似的东西在服务器端渲染东西：
var name = // The name from the query parameters
var items = doQueryOnServerSide(name);
React.renderComponentAsString(ItemPage({
initialName : name,
initialItems : items
});
但是当我尝试编写客户端javascript时，我该怎么办？我知道我希望在哪里渲染我的 dom，但是我应该将哪些初始道具传递给 react 组件？
React.renderComponent(ItemPage({
initialName : ??? // Read the name parameter from URL ?
initialItems : ??? // I don't know yet, and I don't want to make an API call until the user entered something in the input box
});
我尝试过的大多数尝试都以 DOM 在客户端被“擦除”而告终，并带有以下消息：
React 尝试在容器中使用重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，要弄清楚为什么生成的标记在客户端或服务器上是不同的。
请注意，仅删除了我的 ItemList 组件的标记，所以我认为这是我的组件的实现问题，但我真的不知道从哪里开始。
我在正确的轨道上吗？还是我完全错过了什么？