javascript - 尝试在 React 中创建特殊的设计模式，不确定如何实现它

Question

我有两个连接的组件，它们都需要相同的父组件，以便它们可以相互通信。然而我希望能够在任何地方渲染它们，100% 独立。我有一个jsfiddle例如来展示这个想法，这对我的问题来说是一个糟糕的解决方案，因为每当我需要更改传入的 Prop 时，我都会创建一个新的 Img 组件。但它展示了这个想法。我觉得我可能会犯这个错误，但也许有一种方法可以将 Prop 传递给 Img，而无需创建一个新实例。让非 React 类作为父类肯定不理想。

fiddle 解释:制作一个 Img 组件，它接受一个 prop 来告诉它是否应该渲染创建一个 Switch 组件，单击时将更改传递给 Img 组件的 prop

它们可以在任何地方单独渲染并由父类控制。ForceUpdate 只是为了使示例正常工作，我知道这不是一个很好的用途。

代码:

const Img = (props) => {

  return (
    <div><img style={{ display: props.isShowing ? 'inline' : 'none', width: '100px' }} src="http://blog.nationalgeographic.org/wp-content/uploads/2010/04/Greatest-Nature-Photographs-of-All-Time-3.jpg" /></div>
  );
};

const Switch = (props) => {

  return (
    <div style={{ width: '50px', height: '50px', background: 'black', color: 'white'}} onClick={() => props.toggleImg()}>
    click me
    </div>
  );
};

class MasterComponent {
  constructor(outerThis) {
    this.outerThis = outerThis;
    this.toggleState = true;
    this.img = <Img isShowing={ true } />;
    this.switch = <Switch toggleImg={ () => this.toggleImg() } />;
  }

  toggleImg() {
    this.toggleState = !this.toggleState;
    this.img = <Img isShowing={ this.toggleState } />;
    this.outerThis.forceUpdate();
  }

}


class Example extends React.Component {
    constructor(props) {
        super(props);
    this.masterComponent = new MasterComponent(this);
  }

  render() {
    return <div>
    {this.masterComponent.img}
    {this.masterComponent.switch}
    </div>;
  }
}

编辑:所以问题基本上是这样的。我希望“MasterComponent”成为某种父级，它为您提供两个子级，它们在状态/ Prop 领域中相互交互，但像示例的渲染一样单独渲染。因此，想象一下导入 MasterComponent，然后像我在示例组件中所做的那样使用它，而不知道幕后发生了什么。这就是我所希望的设计模式，但仅靠 React 似乎无法实现。

我的 MasterComponent 版本很糟糕，因为当我真的只想更新它所拥有的 props 时，我将 Img 组件替换为具有不同 props 的新 Img 实例。使用forceUpdate 而不是setState 也很糟糕，但我对此不太关心。

我认为，由于 MasterComponent 不是一个具有可能导致重新渲染的状态的 React 组件，并且 Img 和 Switch 不在渲染函数内，它们可以有机地接收该状态，所以也许我的想法行不通。

Answer 1

所以...我不知道这是一个好的模式...它不是 super React-y，但我认为它会实现你的目标正在找。我还没有测试过，但我在想这样的事情:

function getImgSwitchPair() {

  const state = {
    isShowing: true
  };

  const toggleImg = () => {
    state.isShowing = !state.isShowing;
  };

  const Img = () => {
    return (
      <div><img style={{ display: state.isShowing ? 'inline' : 'none', width: '100px' }} src="http://blog.nationalgeographic.org/wp-content/uploads/2010/04/Greatest-Nature-Photographs-of-All-Time-3.jpg" /></div>
    );
  };

  const Switch = () => {
    return (
      <div style={{ width: '50px', height: '50px', background: 'black', color: 'white'}} onClick={toggleImg}>
      click me
      </div>
    );
  };

  return {
    Img,
    Switch,
    toggleImg
  };

}


class Example extends React.Component {
  constructor(props) {
        super(props);
        const {Img, Switch} = getImgSwitchPair();
        this.Img = Img;
        this.Switch = Switch;
  }

  render() {
    return ( 
      <div>
        <Img/>
        <Switch/>
      </div>
    );
  }
}

getImgSwitchPair 生成并返回耦合的 Img 和 Switch 组件，以及 toggleImg 函数(如果您想手动调用它。我们使用 state 对象进行变异以更改 isShowing 状态。

我认为这会起作用。然而，它会完全在 React 生命周期之外存在并更新状态，我认为这是有问题的。因此，虽然这可能有效，但我不确定这是一个好的模式。

我很犹豫是否要发布这个没有测试的内容，并且知道这可能是一个有问题的模式，但我希望它也许能让您找到您正在寻找的东西......