Question

在页面的初始页面加载中，我有一个用户列表

<div class="user"></div>
<div class="user"></div>
<div class="user"></div>

我将内容替换为React组件：

const buildElement = React.createElement;
let domElements = document.getElementsByClassName('user');

for(let domContainer of domElements) {
  ReactDOM.render(buildElement(UserDetails, {
    ...
  }), domContainer);
}

到目前为止一切正常。但是，如果我动态加载新用户，React不会接他们。例如，如果我这样做

$("#users").append("<div class='user'></div>")

如何在动态添加的用户div中渲染React组件？谢谢！

编辑：使用应用程序的当前设置，不可能简单地使用React呈现用户...

Answer 1

检查以下正在运行的代码段。我采用了保存用户详细信息的数组，当单击添加新用户时，您只需要将元素追加到数组即可，因此它将动态呈现所有元素。

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      users: [{
       "name" : "Max",
       "id" : 1
    }, {
       "name" : "Mad",
       "id" : 2
    }, {
       "name" : "john",
       "id" : 3
    }]
  }
  }
  
  adduser = ()  => {
    const users = this.state.users.slice(0);
    users.push({
    name: "New Users",
    key: Date.now().toString()
    });
    this.setState({users});
  }

  render() {
    const listItems = this.state.users.map((user) =>
        <li key={user.key}>{user.name}</li> 
    );
    return (
    <div>
      <div className="container">{listItems}</div>
      <button onClick={() => this.adduser()}> Add new user </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

如果您可以使用customElements代替div，您可以控制每次将新的自定义标签添加到dom时浏览器如何呈现元素。

示例：

customElements.define('user-tag', class extends HTMLElement {
    constructor() {
      super();
      const buildElement = React.createElement;
      let shadowRoot = this.attachShadow({mode: 'open'});
      ReactDOM.render(buildElement(UserDetails, {
        ...
      }), shadowRoot);
    }
  }
});

现在您可以像$("#users").append("<user-tag/>")

一样追加

以下是显示用户点击按钮添加到div中的代码段动态地

// React Component
const UserDetails = () => "I am a user  ";

// Define custom element
customElements.define('user-tag', class extends HTMLElement {
  constructor() {
    super();
    const buildElement = React.createElement;
    // Create shadow root 
    let shadowRoot = this.attachShadow({
      mode: 'open'
    });
    // Render react component
    ReactDOM.render(buildElement(UserDetails, {}), shadowRoot);
  }
});

// Add new user tag dynamically
function addUser() {
  $("#users").append('<user-tag/>')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="users"></div>
<button onClick="addUser()">Add user</button>

反应，在动态添加的元素中渲染组件

2 个答案: