在右边显示嵌套的组件，在左边显示父组件

Question

我在details组件中嵌套了组件todo。如何在右列中显示details组件，在左列中显示todo组件？ 我可以为此使用flexbox吗？这样的嵌套有可能吗？ 还有另一种方法吗？不使用flexbox

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

Todos

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

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

Todo

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 Layout烘焙鸡蛋。我调整了一下代码，实际上忽略了React代码。这篇文章只涉及最终的HTML。

我添加了几行以获得待办事项列表。

解决方案是确定类代表什么的问题：

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

附加：当您能够修改HTML时，也许您想将.todo>h3嵌入具有持久性行的a锚和玩具中。...

更新 从原始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>