在右侧显示嵌套组件，在左侧显示父级

Question

我有组件details 嵌套在todo 组件中。如何在右栏中显示details组件，在左栏中显示todo组件？ 我可以为此使用 flexbox 吗？这种嵌套有可能吗？ 还有其他方法吗？不使用 flexbox

此处代码：https://stackblitz.com/edit/react-xknr8o

待办事项

class Todos extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="todos">
        <Todo />  
      </div>
    );
  }
}

待办事项

class Todo extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="todo">  
        <h3>
          Todo
        </h3>
        <Details />
      </div>
    );
  }
}

详情

class Details extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div className="details">
        <h3>
          Details
        </h3>
        <Paragraph />
      </div>
    );
  }
}

段落

class Paragraph extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <p>
          Paragraph
        </p>
      </div>
    );
  }
}

CSS

.todos {
  border: 1px solid black;
  width: 500px;
  display: flex;
}

.todo {
  width: 250px;
  border: 1px solid yellow;
}

.details {
  width: 250px;
  border: 1px solid red;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}


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

Answer 1

如果使用得当，您可以使用 Flexbox 布局烤鸡蛋。我稍微调整了你的代码，实际上忽略了 React 代码。在这篇文章中只有最终的 HTML 是相关的。

我添加了几行以获得 TODO 列表。

解决方案是决定你的类代表什么：

“1:N 列的行”或“1:N 行的列”。确定后，您需要在.todo>h3 和.details 上划分空间。

EXTRA当您能够修改 HTML 时，也许您想将 .todo>h3 嵌入到 anchor 中并使用持久行来玩弄......

更新 从原始 CSS 中重新引入了 width 和 todos, todo 和 details。

看看接下来会发生什么（全屏并调整浏览器大小）：

/* Relevant Rules*/

/* UDATE reintroduced original WIDTH on below classes */
/* still works, but looks less purdy */
.todos               { display: flex; flex-direction: column; width: 500px; }
.todo                { display: flex; flex-direction: row   ; width: 250px; }
.details             { display: none; flex-direction: column; width: 250px; } /* initially hidden */




.todo>:first-child   { flex: 1 } /* either <h3> or <a> */
.details             { flex: 4 } /* take up 4 times more space than :first-child */

.todo:hover>.details { display: flex } /* show on hover/focus only */

/* irrelevant some niceness */
h3                   { margin: 0 }

.todo                { border-bottom: 1px solid #ddd }
.todo>:first-child   { padding: .5rem } /* either <h3> or <a> */
.details             { padding: .5rem; background-color: CornSilk; color: black }
.todo:hover          { background-color: CornflowerBlue; color: CornSilk }

/*************************************/
/*EXTRA when you are able to use <a> */
/*************************************/
/*  */
.todo>a              { text-decoration: none; color: currentColor }
.todo>a:focus+.details { display: flex }
/* Will show details persistent on hover>click/tap until focus shifts */

<div id="root">
        <div class="todos">

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <h3>plain todo Line</h3>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

            <div class="todo">
                <a href="javascript:(void)"><h3>todo line with &lt;a&gt; click</h3></a>
                <div class="details">
                    <h3>Details</h3>
                    <div>
                        <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
                            Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
                            qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>