Question

（这个问题不同于'是否有可能在另一个内部使用一个组件'，这个问题是'我可以在另一个组件内定义一个组件'，它不是'我可以写组件'的副本在React中的Component里面？'）

是否可以在另一个组件的定义中定义组件？这样我就可以在内部组件中使用外部组件的props。它会使代码更简洁。像下面这样......

class AComponent extends Component {
    CustomButton = (props) => {
        let { disabled, ...otherProps } = props // <-- props of the inner component
        const {isDisabled, currentClassName} = this.props // <-- props of the main component

        return (
            <button
                className={className}
                disabled={isDisabled}
                {...otherProps}>
            </button>
        )
    }

    render() {
        return (
            <div>
                <CustomButton>Add something</CustomButton>
                <CustomButton>Delete something</CustomButton>
                <CustomButton>Edit</CustomButton>
            </div>
        )
    }
}

如果定制按钮是自己定义的（通常的定义组件的方式），我将不得不做类似下面的事情，但是当我重复{... buttonProps}的定义时，它会更加冗长和干燥每个组件

let buttonProps = { 
        className: this.props.currentClassName,
        disabled: this.props.disabled
}

return (
    <div>
        <button {...buttonProps}>Add something</button>
        <button {...buttonProps}>Delete something</button>
        <button {...buttonProps}>Edit</button>
    </div>
)

Answer 1

很有可能在父组件中添加组件。请考虑以下示例：

<ParentComponent style={styles}>
  <ChildComponent style={styles} {...props} />
</ParentComponent>

Answer 2

是的！我需要在render方法中定义函数组件......这是有意义的

class AComponent extends Component {
    render() {
        const ButtonLocal = (props) => {
            const {isDisabled, currentClassName} = this.props

            return (
                <Button 
                    disabled={isDisabled} 
                    className={currentClassName} 
                    {...buttonProps}>
                </Button>
            )
        }

        return (
            <div>
                <ButtonLocal>Add something</ButtonLocal>
                <ButtonLocal>Delete something</ButtonLocal>
                <ButtonLocal>Edit</ButtonLocal>
            </div>
        )
    }
}

Answer 3

虽然可以，但可以在另一个功能组件中定义一个功能组件，但不建议这样做。

参考ReactJs文档：
reactjs.org/docs/components-and-props
reactjs.org/docs/conditional-rendering

大多数（如果不是全部）示例显示子组件是在父组件的外部定义的。

在另一个内部定义一个组件将导致在父级的安装和卸载时重新创建子级组件，如果子级使用父级的道具，则可能导致意外行为，并且如果这些道具突然未定义，则无法处理

最好单独定义组件。

使用React，是否可以在另一个组件的定义中定义组件？

3 个答案: