如何使这个函数工作，在初始化和返回之间附加到我的反应对象
render () {
var users = this.state.users,
appContainer = <div id="container"></div>
for (var i = 0; i < users.length; i++) {
// this doesn't work
appContainer.appendChild(this.createCard(users[i]));
}
return appContainer;
}
【问题讨论】：
很抱歉误读了这个问题。您想要做的事情可以通过 Ryan Florence 和 Michael Jackson here 描述的“门户”模式来实现。以下是解决我认为是您的问题的尝试。如果我仍然不明白你的问题，请原谅我。
render() {
// dont render anything, open a "portal"
return <div ref="container" />;
}
componentDidMount() {
// get initialized component markup
var container = this.refs.container;
var cards = [];
for (var i = 0; i < users.length; i++) {
cards.push(this.createCard(users[i]));
}
// start a new React render tree with the container and the cards
// passed in from above, this is the other side of the portal.
ReactDOM.render(<div>{cards}</div>, container):
}
【讨论】：
做这样的事情
render () {
var users = this.state.users,
var usersDiv = [];
for (var i = 0; i < users.length; i++) {
var temp = (<div>{users[i]}</div>);
usersDiv.push(temp);
}
return(
<div>
{usersDiv}
</div>)
}
这将根据您的 JSON 返回一个包含多个用户 div 的 div。
【讨论】：
如果您需要使用 HTML 并转义 React，只需使用 ref，它就像跨渲染的持久 DOM 节点。我不确定在合法渲染/更新后多久或是否必须重新附加 DOM 节点。
最好的模式是尽可能接近 PureComponent。 PureComponent 完全通过 props 呈现 HTML——没有更新生命周期逻辑。
在未来，内部状态将被视为一种反模式（模型和视图的分离允许平台/设备之间的数据传递，以及不同的皮肤呈现相同的东西）。
render () {
return (
<div className='container'>
{this.userCards()}
</div>
);
}
userCards () {
if (this.props.users) {
return this.props.users.map(user => this.userCard(user));
}
}
userCard (user) {
if (user) {
return (
// React may complain to use key={user.id} for tracking and mutating items
<div className='card'>
{user.name}
</div>
);
}
}
有些人更喜欢userCardsTemplate()、userCardsUI()、renderUserCards() 等
【讨论】：
将您的孩子放入一个普通数组中，然后使用{} 将该数组放入您的 div 元素中（即在数组之后创建 div 元素）。这使它保持不变。之后给它添加孩子对我来说似乎很不符合 React-y。
【讨论】：