javascript - Appending a New Html element inside existing div in react.js - Stack Overflow

admin管理员组

文章数量:1401849

This is the initial html structure. There is container with id="container". I have rendered a Card ponent inside this container.

<div id="container">
   <div>
      <img src="" style="width: 75px;"><div>
      <div>Nishaant</div>
      <div>Age 22</div>
  </div>
</div>

Now i want another card to get concatenate to this container using react.js

I have tried

ReactDOM.render(<Card key={employee.name} name={employee.name} pany={employeepany} url={employee.url}/>,document.getElementById('container'));

But this overwrites the existing data inside the container div. I want the new data to be appended to the existing data.

<div id="container">
       <div>
          <img src="" style="width: 75px;"><div>
          <div>User 1</div>
          <div>Age 22</div>
      </div>
      <div>
          <img src="" style="width: 75px;"><div>
          <div>User 2</div>
          <div>Age 26</div>
      </div>
    </div>

Like above...

This is the initial html structure. There is container with id="container". I have rendered a Card ponent inside this container.

<div id="container">
   <div>
      <img src="https://avatars.githubusercontent./u/k8297" style="width: 75px;"><div>
      <div>Nishaant</div>
      <div>Age 22</div>
  </div>
</div>

Now i want another card to get concatenate to this container using react.js

I have tried

ReactDOM.render(<Card key={employee.name} name={employee.name} pany={employee.pany} url={employee.url}/>,document.getElementById('container'));

But this overwrites the existing data inside the container div. I want the new data to be appended to the existing data.

<div id="container">
       <div>
          <img src="https://avatars.githubusercontent./u/k8297" style="width: 75px;"><div>
          <div>User 1</div>
          <div>Age 22</div>
      </div>
      <div>
          <img src="https://avatars.githubusercontent./u/k8297" style="width: 75px;"><div>
          <div>User 2</div>
          <div>Age 26</div>
      </div>
    </div>

Like above...

• javascript
• html
• reactjs

Share Improve this question Follow edited Apr 5, 2018 at 7:49 SantoshK 1,8771818 silver badges2424 bronze badges asked Apr 5, 2018 at 6:24 Nishaant SharmaNishaant Sharma 14511 gold badge22 silver badges1010 bronze badges 1

• Possible duplicate of React.js: How to append a ponent on click? – Dane Commented Apr 5, 2018 at 7:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You don't start calling ReactDOM.render function to append elements.

Best practice is to call ReactDOM.render once and let it handle all the handling of appending, changing etc.

This is how you could do it:

ReactDOM.render(<App />,document.getElementById('container'));

class App extends Component {
    render() {
        return (
            <div>
                {cardsData.map(card => {
                    return (<Card {...card} />);
                })}
            </div>
        )
    }
}

class Card extends Component {
    render() {
        return (
            <div>
                card html
            </div>
        )
    }
}

To do it the React way you would dynamically render your content, for this you need to store the data in state and update it when you need to append/remove the elements. After this you can render it using map like

class Employee extends React.Component {
   state = {
      employeeList: [{name: 'user-1', age: '22', pany:'abc', url: "https://avatars.githubusercontent./u/k8297" }]
   }
   appendData = () => {
        const newData = {name: 's', age: '21', pany:'xyz', url: "https://avatars.githubusercontent./u/k8297"}
        this.setState(prevState => ({employeeList: [...prevState.employeeList, newData]}))
   }
   render() {
       <div>
           {this.state.employeeList.map(employee => {
                return (
                    <Card key={employee.name} name={employee.name} pany={employee.pany} url={employee.url}/>
                )
           })}
           <button onClick={this.appendData}>Append</button>
       </div>
   }
}

The ReactRender.DOM will render only one ponent. In your case, you could create a ponent called and this ponents renders actually 2 ponents:

const Cards = (props) => {
  return (
   <div>
    <Card Key... name... employee.../>
    <Card Key... name... employee... />
  </div>
 )
}

ReactDOM.render(<Cards />, document.getElementById('app'));

EDIT: If you want to render it on click event dynamically, you can create <Cards /> class, set its state to this.state = { cards: [] }

Create buttons with onClick={this.addCard}, create the addCard() function in your Card class that will update the state (cards array).

Finally, use map functon to go throiugh your state.cards and display the returned values in your JSX code.

You can't just "append" in your HTML, you need to go through state manipulation and rendering the JSX according to what the state looks like.

本文标签： javascriptAppending a New Html element inside existing div in reactjsStack Overflow