Question

在审查和使我的代码更加模块化和健壮，就像任何程序员应该的那样，我注意到我多次使用类似的按钮组件。因此，我决定创建一个按钮组件，然后使用新的路径链接和文本渲染它。

我是一个全新的反应（学习约5天）和相当精通的编程背景。

简单组件按钮，我使用react-route-dom：链接道具以路由到新页面。

function ActionButton () {
    return (
        <div className="Action">
            <button className="ActionButton">
                <Link to={this.props.navLink}> 
                    {this.props.text} 
                </Link> 
            </button>
        </div>
    );
}

使用/构建按钮组件

function ActionPage () {
    return (
        <div className="ActionPage">
            <ActionButton
                navLink="/urlLink1"
                text="btn1"
            />
            <ActionButton
                navLink="/urlLink2"
                text="btn2"
            />
        </div>
    );
}

这不起作用，我得到以下内容：

TypeError：无法读取未定义
的属性'props'

Answer 1

当您使用无状态功能组件时（而不是基于class的组件）使用ComponentName(props)调用组件 - 您可以通过将组件的签名更新为以下来访问props： / p>

ActionButton (props) {

这将允许您访问函数内的props.navLink等。

Answer 2

您的ActionButton组件是转储组件，因此您必须将props作为参数传递给该函数。更新ActionButton组件，如下所示。

function ActionButton (props) {
return (
    <div className="Action">
        <button className="ActionButton">
            <Link to={props.navLink}> 
                {props.text} 
            </Link> 
        </button>
    </div>
);}

由于您不熟悉React，请在此处阅读有关转储与智能组件的更多信息：https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43

简单的按钮组件不接受变量

2 个答案: