Question

我可以在React Container中使用子项还是错了？例如，我有一个按钮列表（ActionButton），这些按钮组合在一起（ActionMenu）。

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <ActionMenu>
        <ActionButton name="New" icon="add" />
        <ActionButton name="Delete" icon="remove" />
      </ActionMenu>
    )
  }
}

class ActionMenu extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('Click!');
  }

  render() {
    return React.Children.map(this.props.children, (button) =>
      React.cloneElement(button, {
        onClick: this.handleClick
      })
    );
  }
}

function ActionButton({ name, icon, onClick }) {
  return <button class={icon} onClick={onClick}>{name}</button>
}

Answer 1

您可以使用儿童，无论儿童是否是容器的组成部分。

“[孩子们]对于代表通用”盒子“的补充工具栏或对话框等组件尤其常见。”

在您的情况下，您有一个菜单，属于此类别。

https://reactjs.org/docs/composition-vs-inheritance.html

Answer 2

我认为这就是你所追求的。实际上你应该把孩子放在最近的父母而不是grandpa。

import React from 'react';
import { render } from 'react-dom';

function ActionButton({ name, handleClick }) {
  return <button onClick={handleClick}>{name}</button>
}

class ActionMenu extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick = () => {
    alert('Click!');
  }

  render() {
    return (
      <div>
        <ActionButton name="add" handleClick={this.handleClick}/>
        <ActionButton name="remove" handleClick={this.handleClick} />
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <ActionMenu />
    )
  }
}

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

您可以尝试在sandbox中运行它。

顺便说一句，现在使用bind非常多余，我们可以使用已ECMA stage 2的public class fields syntax。

在React Container

2 个答案: