如何在grand parent中定义占位符/槽并从子注入组件？

Question

在许多编程语言中 - 例如。 go和c＃razor你有能力定义占位符/区域（布局），你可以从其他模板/视图注入内容。

我知道在一些前端框架中，这也是可能的。 aurelia你定义插槽。我还发现这个库https://github.com/dschnare/react-slot和https://github.com/monvillalon/react-page-layout似乎没有被积极维护。

然后我发现了这个：https://reactjs.org/docs/composition-vs-inheritance.html它似乎做了类似的事情，除了它走向错误的方向。在这里，父母必须知道孩子，因为你从父母那里传递了孩子。

相反，我想在父级中定义一个占位符，我可以从子级中引用它，并以某种方式插入一个大孩子。

以下是我尝试做的事情的说明：

希望它有意义。怎么能在React中完成？

Answer 1

你不需要老虎机。您可以使用状态和条件渲染来实现此目的。

对于不同的页面呈现我推荐react-router。

＆＃34; slot＆＃34;对于设置按钮，您可以使用条件来渲染它。

这是一个运行代码段，其中包含一个非常简单的示例：

＆＃13;

＆＃13;

const PageOne = ({ showSettings }) => (
  <div>{!showSettings ? <h1>Page 1</h1> : <div>Settings Page</div>}</div>
);
const HomePage = () => <h1>Home Page</h1>;

const ButtonPageOne = ({ onClick }) => (
  <button onClick={onClick}>Button for Page 1 only</button>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPageOne: false,
      showSettings: false
    };
  }

  togglePages = () => 
    this.setState({ showPageOne: !this.state.showPageOne });
    
  onSettingsClick = () =>
    this.setState({ showSettings: !this.state.showSettings });

  render() {
    const { showPageOne, showSettings } = this.state;
    return (
      <div>
        <div>
          <h3>Some header</h3>
          <div style={{ float: "right" }}>
            {showPageOne && <ButtonPageOne onClick={this.onSettingsClick} />}
          </div>
          <div>
            <button onClick={this.togglePages}>togglePages</button>
          </div>
        </div>
        <hr />
        {showPageOne ? <PageOne showSettings={showSettings} /> : <HomePage />}
      </div>
    );
  }
}

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;

我有条件地渲染元素，当然您可以有条件地传递一些CSS类或styles。

这里的关键点是你应该lift the state up，让父母管理一些兄弟姐妹需要知道的状态（或者使用像redux这样的州经理。）

Answer 2

你可以使用回调道具来实现这一点，不过我会反对它。

在父级上，定义一个名为showSettingsIcon的函数，该函数接受一个布尔参数并将其作为prop传递给子级。孩子将有逻辑来确定它是否具有设置子项并调用该函数。确保该功能是＆＃34;绑定＆＃34;对于父母，就像你对任何其他回调道具一样。

您可以使用另一个回调道具setGrandchildComponent或其他东西，它将组件实例或组件类型作为参数。调用时，父级将保存对参数的引用并将其克隆或在render()中创建它的实例。

但是，如果你做了类似这样的事情，那么你会搞砸使{React}变得如此强大的"Unidirectional Data Flow"。通过上下传递数据和命令，您的应用程序变得更不确定，更难以推理。随着您的应用变得越来越复杂，重现棘手的错误并添加新功能真的很难。

如果您真的确实需要此类功能，我建议您查看状态管理库，例如Redux或MobX。但是有一个警告：他们有一个非常重要的学习曲线。

我最近迁移了一个项目，将Redux与React一起使用，因为我想要像你描述的很酷的功能。我把自己写进了一个不舒服的角落。使用任何库/框架的哲学粒度比使用它更好。