Question

从一两个星期以来我就一直在使用ReactJS，现在我正尝试使用它来构建一个应用程序。

我想我理解我应该如何使子组件与其父组件进行通信，并通过函数作为道具。但是现在我想做些不同的事情，并使2个同级组件彼此通信。我知道我可以使用它们的公共父组件来实现这一点，但是我真的很想在其中一个同级组件上声明一些方法，并在整个App中重用它们。

这是我的想法和问题：我可以安全地设置父组件的状态，并在其中放置子组件的“ this”，然后在其他组件上使用此变量吗？

我已经编写了这段代码，并且可以正常工作，但是我不知道这是好方法还是坏方法。

这是我代码的一部分，让您了解我在做什么。

父项：

class App extends Component{
  state = {}
  render(){
    return <Router>
      <div id="page">
        <Header app={this} />
        <div id="main" class="row">
          <Sidebar app={this} />
          <Content app={this} />
        </div>
        <Footer app={this} />
      </div>
    </Router>
  }
}

侧边栏：

class Sidebar extends Component{
  state = {menu: []}

  componentDidMount() {
    this.props.app.setState({sidebar: this})
  }

  populateSidebar = (sidebar) => {
    this.setState({menu: sidebar})
  }

  render(){
    if (this.state.menu.length == 0){
      return null;
    }
    return (
      <sidebar class="col-3">
        <ul>
            {this.state.menu.map(item => <li><Link to={item.url}>{item.text}</Link></li>)}
        </ul>
      </sidebar>
    )
  }
}

用户组件（它是内容组件的子代。内容组件只是根据url进行一些路由）：

class User extends React.Component {

  async componentDidMount() {
    await this.props.app.state.sidebar
    this.props.app.state.sidebar.populateSidebar(
      [
        {
          url: "/user/add",
          text: "Add new user"
        },
        {
          url: "/user/list",
          text: "Users list"
        }
      ]
    )
  }

  async componentWillUnmount() {
    await this.props.app.state.sidebar
    this.props.app.state.sidebar.populateSidebar([])
  }

  render() {
    return (
      <div>
        <UserAdd />
        <UserList />
      </div>
    );
  }
}

我知道我在这里完成的工作是如此基础，以至于我完全可以用另一种方式来完成它，例如，将侧边栏菜单作为数组放置在父组件的状态上。但是，假设我要在补充工具栏上使用一堆方法，并让我的所有其他组件使用它们，而无需重写太多代码。这是个坏主意吗？

Answer 1

我真的很想在同一个兄弟中声明一些方法组件，并在整个App中重复使用它们。

一种更好的方法是使用一些静态方法创建一个帮助器类，并在组件中的任何地方使用它，该类甚至不必只是常规ES6类的React组件，例如：

class MyHelper {
    static doSummation(num1, num2) {
        return num1 + num2;
    }

    static doMultiplication(num1, num2) {
        return num1 * num2
    }

    // ... other helper methods as you want
}

export default MyHelper;

然后在您的React组件中，您可以导入它并使用其辅助方法：

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

class MyComponent extends Component {
    render() {
        return (
            <div>
                {MyHelper.doSummation(1, 2)};
            </div>
        );
    }
}

为了更好的组织，您甚至可以拥有任意数量的帮助程序类，例如MathHelper，StringFormattingHelper等...

Reactjs：我可以使用状态安全地访问同级组件吗？

1 个答案: