通过功能传递道具？ 反应

Question

编辑：

我已经对问题进行了编辑，以使其更加清楚：

因此，通常可以在render（）函数内部传递props，如下所示：

render(){

 return(
  <div>
   <ExampleStatelessComponent message={this.state.message}
  </div>
 )
}

然后，可以通过props.message将message与组件内部的props一起使用。

可以在函数内部完成此操作吗？ 例如，如果我不想渲染ExampleStatelessComponent而是将props传递给它，该怎么办？ 我可以使用一个函数（例如componentDidMount）将道具传递给无状态组件吗？

componentDidMount(){

 <ExampleStatelessComponent message={this.state.message}

}

这可能吗？ 希望这能使事情澄清。 感谢大家！

Answer 1

可以传递并渲染无状态函数，但是您没有在父组件的render函数内使用无状态函数，因为您将其称为onClick 。

此外，您不会从statelss函数返回任何内容。

一个有效的例子是：

class App extends Component {
  state = {
    hello: 'HelloWorld',
    isChildVisible: false,
  }

  onClickFunction = () => {
    this.setState({isChildVisible: true})
  }

  render() {
    return (
      <div>
        <h3 onClick={this.onClickFunction}> Placeholder </h3>
        {
          this.state.isChildVisible &&
          <ExampleStateless message={this.state.message} />
        }
      </div >
    );
  }
}

const ExampleStateless = (props) => {
  return (
    <div>{props.message}</div>
  );
}

关于无状态功能的更多信息在这里