Question

由于我是新来的反应者，所以我有一个问题。我有一个反应成分及其性质。我想从使用组件的页面访问这些属性之一。

type BranchProps = {
  SelectedBranch : string
 }

class Branch extends React.Component<BranchProps, BranchState> {
    constructor(props: BranchProps) {
        super(props);
    }

    render() {
        return (
            <SelectBox></SelectBox>
        )
    }
}

export default Branch ;

ParentPage.tsx

import Branch...
class Page extends.... {
    ctor..
    const test:string = () => {
        Branch.SelectedBranch ???
    }
}

我想从我的上级页面获取“ SelectedBranch”。注意：SelectedBranch在更改事件上正在更改。我应该将我的SelectedBranch设置为const并导出它还是应该怎么办？

Answer 1

我已经使用不同的道具创建了这个Input.js子组件

const Input = ({ placeholder, label, value, onChangeText, secureTextEntry }) => {

return (
    <View >
        <Text >{ label }</Text>
        <TextInput
            secureTextEntry={secureTextEntry}
            placeholder={placeholder}
            autoCorrect={false}
            value={value}
            onChangeText={onChangeText}
            style={inputStyles} 
        />
    </View>
);
};

一旦导入要在页面上使用的内容，就可以完成对内容的操作。只需引用特定的道具

即可传递值

<Input 
        secureTextEntry
        placeholder={'password'}
        label={'Password'}
        value={this.state.password}
        onChangeText={password => this.setState({ password })}
/>

此处，通过使用父级的状态将“密码”分配给了组件。像这样，您可以根据需要分配值。

state = { email: '', password: '', error: '', loading: false };

使用Redux方法存在更好的方法。最好看看。

Answer 2

首先，您应该了解组件内state和props之间的区别。道具不应该更新，这是国家的角色。

您不能直接在其外部访问组件的道具。

在纯粹的反应中（没有redux这样的librabry），正确的方法应该是使用回调将元素返回给父元素。

class Branch extends React.Component<BranchProps, BranchState> {
    state = {
      'selectedBranch': ''
    }
    
    constructor(props: BranchProps) {
        super(props);
    }

    handleOnChange = (e) => {
      this.setState({'selectedBranch': e.target.value})
      
      this.props.parentHandleChangeBranch(this.state.selectedBranch);
    }
    render() {
        return (
            <SelectBox value={this.state.selectedBranch} onChange="{this.handleOnChange}"></SelectBox>
        )
    }
}

class Page extends React.Component {

  state = {
    'branch': null
  }
  
  parentHandleChangeBranch  = (branch) => {
    this.setState({'branch': branch};
  }
  
  render () {
    <div>
      <Branch parentHandleChangeBranch={this.parentHandleChangeBranch} />
    </div>
  }
}

您可以在父组件中声明一个函数，并将其作为prop传递给子组件。然后，只要您想在孩子里面，就调用此回调。

如何在与打字稿反应的组件之外使用组件的道具？

2 个答案: