반응에서 매개변수를 전달하는 방법은 무엇입니까?

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.

React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React가 MVC의 V(뷰)라고 생각합니다.

React는 Facebook의 내부 프로젝트에서 시작되었으며 Instagram의 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.

React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 주목하고 사용하기 시작했습니다.

가장 일반적인 것은 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 것입니다.

상위 구성요소는 this.props를 사용하여 직접 달성할 수 있는 하위 구성요소에 값을 전달합니다.

상위 구성요소에서 사용자 정의 속성을 다음에 추가합니다. 데이터를 전송해야 하는 자식 컴포넌트는 자식 컴포넌트에서는 this.props

// 父组件 render() {        
    return (                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>            
                   )
    } 

//子组件　//通过this.props.toson就可以获取到父组件传递过来的数据 、、如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了
      tograndson={this.props.toson}
、、孙组件通过this.props.tograndson获取到数据

를 통해 부모 컴포넌트가 전달한 데이터를 얻을 수 있습니다. 자식 컴포넌트가 부모 컴포넌트에 값을 전달하는 경우 수신 설정을 해야 합니다. 부모컴포넌트에 function과 state를 넣고 동시에 props를 통해 자식컴포넌트에 함수명을 전달해줍니다

즉, 자식컴포넌트에서 부모컴포넌트를 자식컴포넌트에 전달하는 방식을 호출한다고

//孙子组件export default class Grandson extends Component{
    render(){        return (            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>        )
    }
}; 
//子组件export default class Child extends Component{
    render(){        return (            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>        )
    }
}; 
//父组件export default class Parent extends Component{
 
    constructor(props){
        super(props)        this.state={
            username: &#39;&#39;,
            sex: &#39;&#39;
        }   
    },
    handleVal(event){        this.setState({username: event.target.value});
    },
    handleSelect(value) {        this.setState({sex: event.target.value});
    },
    render(){        return (            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名：{this.state.username}</div>
                <div>用户性别：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>        )
    }
}

누군가가 물었습니다 얼마 전에 이런 질문이 있었는데 생성자에서 super()를 어떻게 사용하나요?

요약하자면:

하위 클래스의 생성자에서 이것을 사용하려면 부모 클래스의 생성자를 호출해야 합니다. 그렇지 않으면 이것을 얻을 수 없습니다.

그런 다음 질문이 생깁니다. 학부모 수업? super()를 통해

부모 컴포넌트가 전달한 매개변수를 생성자에서 사용하려면 부모 컴포넌트의 super를 호출할 때 부모 컴포넌트의 생성자에 매개변수를 전달해야 합니다

이것을 사용하지 않거나 생성자의 매개변수에는 super가 필요하지 않습니다. React가 이를 수행했기 때문에 props

Route 매개변수 전달

설치 npm install React-router-dom --save-dev

경로를 정의합니다(보통 외부에 배치)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter>

페이지 점프 시

<li  onClick={el =>　this.props.history.push({
　　　pathname:&#39;/detail&#39;,
    　 state:{id:3}
})}>
</li>

수신된 데이터는 this.props.history.location

을 통해 전달된 데이터를 얻을 수 있습니다. 경로 매개변수 전달 시 이러한 문제가 발생할 수 있습니다. 정의된 위치 기록 일치에 소품이 포함됩니다.

경로에 탑재된 구성 요소는 일반적으로 Container.js입니다. 일반적으로 UI.js 구성 요소를 분리하고 클릭하여 여기로 이동합니다. 에는 위치 기록 일치

가 필요하지 않습니다. UI 구성요소 props 여러 구성요소가 공유해야 하는 상태를 라우터

상태 승격

과 함께 상위 구성요소를 사용하여 가장 가까운 공통 상위 구성요소에 공유해야 하며 상위 구성요소는 이를 props

를 통해 하위 구성요소에 배포합니다.

context

컴포넌트가 자체 컨텍스트에 저장되면 해당 컴포넌트 아래의 모든 하위 컴포넌트는 중간 컴포넌트를 전송할 필요 없이 이 상태에 액세스할 수 있으며, 이 컴포넌트의 상위 컴포넌트에는 액세스할 수 없습니다.

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
通过getChildContext()将属性传递给所有的子孙组件
提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>标题</h1>
    )
  }
}
子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态。
Title 想获取 themeColor，它是一个字符串，我们就在 contextTypes 里面进行声明。

redux 소개

redux는 React를 위한 예측 가능한 상태 관리 메커니즘을 제공합니다

redux는 전체 애플리케이션 상태를 스토어에 저장하며, 이는 상태 트리를 저장합니다.

구성 요소는 직접 알리는 대신 스토어에 작업(액션)을 디스패치(디스패치)할 수 있습니다. 다른 구성 요소

다른 구성 요소는 스토어의 상태를 구독하여 보기를 새로 고칠 수 있습니다

관련 권장 사항: 반응 튜토리얼

위 내용은 반응에서 매개변수를 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!