在 React 从子级到父级的有条件渲染的最佳方式答案

【问题标题】：The best way to render conditionally in React from Children to Parent在 React 从子级到父级的有条件渲染的最佳方式
【发布时间】：2020-09-10 20:38:48
【问题描述】：

我是 React 的新手，目前正在使用 react 16.13，我正在尝试弄清楚如何：

将数据从子组件传递到父组件
如果数据为"true"，则在传递数据时，在Parent页面中渲染Child组件。
我们有两个孩子，只有一个 "true" 必须在父页面上呈现。

// Parent

import React from 'react';
import './App.css';
import ChildOne from './components/ChildOne';
import ChildTwo from './components/ChildTwo';


function App() {
   return (
     <div className="App">
       <ChildOne/>
       <ChildTwo/>
     </div>
   );
}

export default App;

// Component ChildOne

function ChildOne() {
    const isActive = "true";

    return (<div>{isActive}</div>);
}

export default ChildOne;


// component ChildTwo

function ChildTwo() {
    const isActive = "false";

    return (<div>{isActive}</div>);
}

export default ChildTwo;

我知道这不是在每个子页面上表示状态的正确方法，但我想了解如何根据从子页面到父页面的字符串值来呈现上述内容，以便我可以使用 useState 重构代码。

【问题讨论】：

你真的应该阅读 React.js 文档。
尝试根据自己的尝试提出特定问题，并将问题集中在特定（单个）问题上。请注意，这里的社区不会取代其他很棒的在线资源，例如教程。查看How do I ask a good question? 以更好地了解 Stack Overflow 上要问什么样的问题。

标签： javascript reactjs react-native ecmascript-6 jsx

【解决方案1】：

1 将数据从子组件传递到父组件

这是通过回调完成的。

2当数据传入时，如果数据为“真”，则在Parent页面中渲染Child组件。

可以通过 render 方法中的 if 语句来实现 Child 内的条件渲染。

function ChildOne(props) {
    const isActive =props.isActive;

    return (isActive ?<div>{isActive}</div>:null);
}

3 我们有两个孩子，只有一个“真实”的孩子必须在父页面上呈现。

如果这两个子组件是同一个组件，我建议重用该组件。并传递一个道具。

function Child() {
    const isActive =props.isActive;

    return (isActive ?<div>{isActive}</div>:null);
}



function App() {
   return (
     <div className="App">
       <Child isActive={true}/>
       <Child isActive={false}/>
     </div>
   );
}

【讨论】：

【解决方案2】：

您可以使用回调将数据从 Child 发送到 Parent
和 3. 您可以检查父级中的数据以呈现哪些有数据是真的

// Parent

import React from 'react';
import './App.css';
import ChildOne from './components/ChildOne';
import ChildTwo from './components/ChildTwo';


function App() {
  const [childData1, setChildData] = useSate(null)
  const [childData2, setChildData] = useSate(null)
  const handleCallBack = (childData) =>{
    setChildData(childData)
    // save or do whatever you want with childData here
  }
   return (
     <div className="App">
       {childData1 === true && <ChildOne callBack={handleCallBack}) data={childData1} />}
       {childData2 && === true <ChildTwo/>}
     </div>
   );
}

export default App;

// Component ChildOne

function ChildOne({callBack, data}) {
    const isActive = "true";

    return (
      <>
      <button onClic={() => callBack(<data you want to sent to parent>)}>Send Data To parent</button>
      </>
      <div>{data}</div>
  )
}

export default ChildOne;


// component ChildTwo

function ChildTwo() {
const isActive = "false";

return (<div>{isActive}</div>);
}

【讨论】：

【解决方案3】：

您可以使用回调（如事件）将更新的数据从子级发送到父级。并且只需使用控制 App 状态的函数来处理这些回调。
当组件更改时，它会再次呈现，并使用新的道具和处理程序再次呈现其子项。
您可以使用三元运算符来决定渲染哪个组件。

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="App">
      {isActive
        ? <Child1 isActive={isActive} setIsActive={setIsActive} />
        : <Child2 isActive={isActive} setIsActive={setIsActive} />
     }
    </div>
  );
}

function Child1 ({ isActive, setIsActive }) {
  return (<div onClick={() => setIsActive(!isActive)}>{isActive}</div>);
}

function Child1 ({ isActive, setIsActive }) {
  return (<div onClick={() => setIsActive(!isActive)}>{isActive}</div>);
}

【讨论】：