Question

我有以下按钮CheckMe

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto">
            <ColumnDefinition.Style>
                <Style TargetType="ColumnDefinition">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=CheckMe,Path=IsChecked}" Value="True">
                            <Setter Property="Width" Value="*" />
                            <Setter Property="MinWidth" Value="300" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=CheckMe,Path=IsChecked}" Value="False">
                            <Setter Property="Width" Value="Auto" />
                            <Setter Property="MinWidth" Value="50" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ColumnDefinition.Style>
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Background="Green">
        <CheckBox x:Name="CheckMe" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TextBlock Text="Use * width" />
        </CheckBox>
    </Border>
    <StackPanel Grid.Column="1">
        <TextBlock Text="Second column" />
    </StackPanel>
</Grid>

我尝试将其转换为React

MinWidth

带

AttachedProperty

ProductClass

ng-click

这里的问题是当我单击按钮时，我从<button ng-click="productClass.saveProductMehod()">Save</button>的构造函数中松开<button-component on-submit="productClass.saveProductMehod" value="'Save'"></button-component>初始化，当它进入class ButtonComponent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { this.props.onSubmit(); } render() { return ( <button onClick={this.handleClick}> {this.props.value} </button> ); } } ButtonComponent.propTypes = { value: PropTypes.string.isRequired, onSubmit: PropTypes.func.isRequired, }; export { ButtonComponent }时，这就是props对象。我错过了什么？

Answer 1

这里缺少一些内容：

<button-component on-submit="productClass.saveProductMehod"
   value="'Save'"></button-component>

应该是（注意保存周围的引号和onSubmit上的引号，以及案例）：

<ButtonComponent onSubmit={productClass.saveProductMehod}
   value="Save"></ButtonComponent>

Answer 2

让我们假设您的角度点击次数为：

const ReactButton = props =>(<button onClick={props.onClick} value={props.value}/>)

类似的反应组件（无状态表单）将是：

class ReactButton extends React.Component{
 render(){
   return(<button 
             onClick={this.props.onClick} 
             value={this.props.value}/>)
 }
}

类似的反应组件（基于类的表单）将是：

spread

使用此ReactButton：

多数民众赞成！

需要牢记的要点：

自定义组件遵循以Capital开头的惯例字母表并遵循驼峰案例语法。
JSX就像html一样。只有课 - ＆gt;类名。
每个组件名称都应该是有效的JS变量

Answer 3

必须将新方法绑定到控制器才能访问预定义属性：

this.saveProductMehod = this.saveProductMehod.bind(this);

转换ng-click代码以反应组件

3 个答案: