reactjs - 如何在祖 parent 中定义占位符/槽并从 child 中注入(inject)组件？

Question

在许多编程语言中 - 例如。 go 和 c# razor 您可以定义占位符/区域(布局)，您可以从其他模板/ View 注入(inject)内容。

我知道在某些前端框架中这也是可能的，例如。 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 。

至于设置按钮的“槽”，您可以只使用条件来渲染它。

这是一个运行片段，其中包含一个非常简单的示例:

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"));

<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>

我有条件地渲染了元素，当然您可以有条件地传递一些 CSS 类或 样式 来代替。

这里的关键点是你应该 lift the state up ，让父级管理一些兄弟级子级需要了解的状态(或者使用像 redux 这样的状态管理器)。