Question

嗨，我是React的新手，有没有办法从渲染函数之外的父组件调用子组件？下面是我的sudo代码，

任何想法!!!!!!

var Parent React.createClass({

 someFunction: function(){
  //can I call Child component from here on every click
  // as this will rerender  the child component only  on each click
  // leaving parent component unrendered
 }, 

 render: function(){


 }
})

Answer 1

答案是NO。你在问题中得到答案。

让我解释一下。只有在child组件中使用组件时才能将组件称为parent组件，这意味着child组件应在render() parent内使用}} 零件。因此，您无法从父级渲染中调用子组件。

为了达到您的要求，您可以使用state重新呈现子组件。

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>
<script type="text/babel">

  const Child = React.createClass({
    render() {
      return <h1>Hello, world!</h1>
    }
  })

  const Parent = React.createClass({
    getInitialState() {
      return {
        renderChild: false
      }
    },
    onClick(){
      this.setState({
        renderChild: !this.state.renderChild
      })
    },
    render(){
      return <div>
        <button onClick={this.onClick}>{this.state.renderChild ? 'Hide' : 'Show'} Child</button>
        {
          this.state.renderChild &&
          <Child />
        }
      </div>
    }
  })

  ReactDOM.render(<Parent />, document.getElementById('example') );
</script>

我们可以在父渲染函数之外调用子组件吗？

1 个答案: