Question

我是新手做出反应，我有一个反应组件结构，如：

<MainComponent>
     <Button />
     <Content />
</MainComponent>

现在，当我点击按钮时，我需要将内容组件的现有 div （例如div1）替换为另一个内容 em> div （div2）。你能告诉我怎么做吗？谢谢。

注意：到目前为止，在点击事件中我一直在使用state和prop更改单个div的数据。现在我要用另一个替换整个div。

Answer 1

喜欢这个。

＆＃13;

render() {
  var returnIt;
  if (useDivOne) returnIt = (<div id='one'></div>);
  else returnIt = (<div id='two'></div>);
  return (returnItj);
}

＆＃13;

Answer 2

如果这是你的结构：

<MainComponent>
  <Button />
  <Content />
</MainComponent>

和内容呈现类似：

<div>
  this is div 1
</div>

我认为你需要将一个道具传递给内容，告诉你要渲染哪个div，然后在内容中渲染你操纵布尔逻辑的属性来呈现不同的组件：

class Content extends Component {
  render() {
    return(
      {
        !this.props.RenderDiv2Bool &&
        <div>
          This is Div1 and it will be rendered
          because RednerDiv2Bool is false.
        </div>
      }
      {
        this.props.renderDiv2Bool &&
        <div>
          This is Div2 and it will be rendered
          because RednerDiv2Bool is true.
        </div>
      }
    )
  };
}

不一定更好，但只是另一种方式。

如何基于事件使用react替换一个孩子的反应/ html组件与另一个子组件？

2 个答案: