javascript - 通过另一个组件中的onClick事件添加一个组件的多个副本(Add multiple copies of a component by onClick event in another component)

Question

[This is made with the React-boilerplate]

([这是用React样板制作的])

I have 2 components for the Homepage container:

(我有2个用于Homepage容器的组件：)

• Button

  (纽扣)

• Table

  (表)

The button is constructed for use in any case for multiple functions

(该按钮可在任何情况下用于多种功能)

function Button(props) {
  const className = `button ${props.type}`;

  return (
    <button type="submit" onClick={props.handleClick} className={className}>
      {props.label}
    </button>
  );
}

Button.defaultProps = {
  type: 'primary',
};

Button.propTypes = {
  type: PropTypes.any,
  handleClick: PropTypes.any,
  label: PropTypes.any,
};

And the Table is the default for this example

(表是此示例的默认值)

function Table() {
  return (
    <div>
      <FormattedMessage {...messages.header} />
    </div>
  );
}

In the homepage container,

(在首页容器中，)

import Button from '../../components/Button';
import Table from '../../components/Table';

function helloMoto() {
  console.log(Button);   
  var addingItemsNode = document.getElementsByID('addingItems'); // Until this line works
  var itemNode = React.createElement('Table', null, ''); 
  addingItemsNode.appendChild(itemNode);
}

export default function HomePage() {
  return (
    <div>
      <p>
        <FormattedMessage {...messages.header} />
      </p>
      <Button type="addTable" handleClick={helloMoto} label="+" />
      <div id="addingItems"></div>
    </div>
  );
}

The button works without trying to add the component to the <div /> , and I search multiple ways for add it but doesn't work well for me because i don't use the render in the components and maybe this is the reason why I'm stuck?

(该按钮可以正常运行，而无需尝试将组件添加到<div /> ，并且我搜索了多种添加方法，但是对我来说效果不佳，因为我没有在组件中使用渲染，这也许就是为什么我被卡住了吗？)

  ask by v-alex translate from so

Answer 1

等待大神答复