Question

编辑：

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

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

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>
  );
}

关于无状态功能的更多信息是here

通过功能传递道具？反应

1 个答案: