Question

如果你能帮助我，我真的很感激。也就是说，我有一个父组件，它从子组件获取新数据。在子组件数组中映射数据，因此传入数据到父组件不是一个而是多个。我想将它保存在列表标记内，以获取与子组件的传入值一样多的列表项。

以下是代码：

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: '',
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: <li> {val} </li> // here I would like to save every incoming mapped data
    });
  }
  render() {
    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={(val) => this.updateParent(val)}
        />
        <ul className="listContainer">
          {this.state.incomingData}
        </ul>
      </div>
    );
  }
}

export default Terminal;

Answer 1

我不想将React Elements（使用<li>在jsx文件中创建）存储为状态。我宁愿存储列表，并将其呈现给render（）函数。我会把它改成像：

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: [],
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: this.state.incomingData.concat(val) 
    });
  }
  render() {
    const listItems = this.state.incomingData.map(item => {
      return <li>{ item }</li>
    });

    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={this.updateParent}
        />
        <ul className="listContainer">
          {listItems}
        </ul>
      </div>
    );
  }
}

export default Terminal;

请注意，我也直接传递this.updateParent，而不是将其包装在一个匿名函数中，该函数应该给出相同的结果。您可以通过反应获得关键警告，但我不知道您可以访问的唯一标识符。

在React.js

1 个答案: