如何仅将父组件中的选择性元素呈现给子组件？反应式答案

【问题标题】：How to render only selective elements from a Parent Component to child ? ReactJs如何仅将父组件中的选择性元素呈现给子组件？反应式
【发布时间】：2018-04-22 06:16:28
【问题描述】：

正如标题所说，我正在寻找一种仅将选择性组件从父级渲染到子级的方法。例如，

让我成为父组件：

export default class Signup extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="signupWrapper">
                <h2>Sign up</h2>
                <p>Already have a account?
                    <Link to="/login"> click here to Sign In</Link>
                </p> 
         ) 
     }
}

//Now,let's import the parent to a child,


import Signup from '/pathtoparent'
export default class Child extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="container">
                 <Signup/>
            </div>
         )
    }
}

我的问题是：如果我不希望父母的 p OR h2 标签进入我的孩子，该怎么办？我可以有条件地渲染它，但是有没有替代方法来简单地不渲染来自父级的选择性标签？

【问题讨论】：

请格式化代码。
我做到了。谢谢。
无论如何，我认为您可能会将父母与孩子混淆。您应该在父母中使用孩子，而不是在孩子中使用父母。
刚刚格式化了您的代码。请花一些时间来做这件事，因为它很难读。
@Kinduser 不管怎样，问题还是一样：如何只渲染导入组件中的选择性元素？

标签： javascript reactjs react-redux jsx

【解决方案1】：

您可以将 prop 从父组件传递给子组件，然后在子组件中添加条件渲染

所以你的父母看起来像这样

import Signup from '/pathtoparent'
export default class Child extends Component {
  constructor(props) {
      super(props);
  }
  render() {
      return (
          <div className="container">
               <Signup renderh2={condition_true_or_false} renderP={condition_true_or_false}/>
          </div>
       )
  }
}

虽然你的孩子看起来像

export default class Signup extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="signupWrapper">
                {this.props.renderh2 && <h2>Sign up</h2>}
                {this.props.renderP && <p>Already have a account?
                    <Link to="/login"> click here to Sign In</Link>
                </p> } 
         ) 
     }
}

【讨论】：