初始化后,React JSX附加HTML(反应对象)

Question

如何使此功能工作,在初始化和返回之间附加到我的反应对象

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;
}

我只是好奇,你怎么会做这样的事情,因为动作脚本允许XML的传球和动态追加-它有效地与文体上诉正常JSON对象,我看到了<div>,它很容易看出我与HTML的形式工作比myHtmlDiv... ..即使我把它投射到一个变量,很容易看到肉的位置,并初始化它的许多属性

Answer 1

很抱歉误读了这个问题.你希望做什么可以由Ryan佛罗伦萨与迈克尔·杰克逊所描述的"门户"模式来实现此.以下是尝试解决我认为是你的问题.如果我仍然不理解你的问题,请原谅我.

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):
}

Answer 2

做这样的事情

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。

Answer 3

如果你需要使用 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()等等