Question

这是最初的html结构。容器的id =＆＃34;容器＆＃34;。我在这个容器中渲染了一个Card组件。

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

现在我希望使用react.js

将另一张卡连接到此容器

我试过了

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

但是这会覆盖容器div中的现有数据。我希望将新数据附加到现有数据中。

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

如上所述......

Answer 1

您没有开始调用ReactDOM.render函数来附加元素。

最佳做法是调用ReactDOM.render一次，让它处理追加，更改等所有处理。

你可以这样做：

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

Answer 2

ReactRender.DOM只渲染一个组件。在您的情况下，您可以创建一个被调用的组件，这个组件实际上呈现了两个组件：

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

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

编辑：如果要动态地在点击事件上呈现它，可以创建<Cards />类，将其状态设置为this.state = { cards: [] }

使用onClick = {this.addCard}创建按钮，在Card类中创建将更新状态（卡片阵列）的addCard（）函数。

最后，使用map functon来运行你的state.cards并在JSX代码中显示返回的值。

你不能只在你的HTML中“追加”，你需要通过状态操作并根据状态来渲染JSX。

Answer 3

为此，您需要动态呈现内容的React方式，为此您需要将数据存储在状态中，并在需要追加/删除元素时更新它。在此之后，您可以使用地图

渲染它

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

在react.js

3 个答案: