react.js의 소품을 갱신할 수 없는 이유는 무엇입니까?

react.js의 소품을 갱신할 수 없는 이유는 무엇입니까?

둘 다 ?state ★★★★★★★★★★★★★★★★★」props이터 소소 ?나 나? ???하고 싶다props자신과 모든 아이들을 다시 치료하게 할 수 있습니다.간단해 보이지만 컴포넌트가 자신의 소품이나 부모의 소품을 어떻게 업데이트해야 할지 모르겠습니다.

도와주셔서 감사합니다.

리액트 철학은 소품은 불변하고 하향식이어야 한다는 것이다.부모가 원하는 소품을 자녀에게 보낼 수는 있지만 자녀는 자신의 소품을 수정할 수 없다는 뜻이다.들어오는 소품에 반응하고 싶으면 들어오는 소품에 따라 아이의 상태를 수정하는 것입니다.

자기 소품이나 부모님 소품 업데이트는 절대 안 해항상 자신의 상태를 업데이트하고 부모가 준 가치관에 반응합니다.

상태의 무엇인가를 변경하는 액션을 자녀에게 실행시키는 경우, 그 자녀에게 콜백을 전달하고, 그 콜백을 지정한 액션으로 실행할 수 있습니다.이 콜백은 부모 상태를 수정할 수 있으며, 부모 상태는 다시 렌더 시 자녀에게 다른 소품을 전송할 수 있습니다.

그 이유에 대한 질문에 답하기 위해

리액트에서는 소품들이 부모에서 자녀로 아래로 흐릅니다.

, 콜을 할 ReactDOM.renderReact는 루트 노드를 렌더링하고 소품을 전달한 후 해당 노드를 잊어버릴 수 있습니다.이미 렌더링되어 있습니다.

각 컴포넌트에서 이 작업을 수행하고 렌더링한 후 깊이 우선으로 트리 아래로 이동합니다.

컴포넌트가 소품을 변환할 수 있는 경우 부모 노드가 이미 렌더링한 후에도 부모 노드에 액세스할 수 있는 개체를 변경할 수 있습니다.로 인해, 예를 「A」, 「A」, 「A」, 「A」 등, 모든 종류의 동작이 이 있습니다.user.name앱의 한 부분에 하나의 값이 있고 다른 부분에 다른 값이 있을 수 있으며 다음에 렌더가 트리거될 때 자동으로 업데이트될 수 있습니다.

가상의 예를 들자면:

// App renders a user.name and a profile
const App = (props) => 
  React.createElement('div', null, [
    props.user.name,
    React.createElement(Profile, props)
  ])

// Profile changes the user.name and renders it
// Now App has the wrong DOM.
const Profile = ({user}) => {
  user.name = "Voldemort" // Uh oh!
  return React.createElement('div', null, user.name);
}

// Render the App and give it props
ReactDOM.render(
  React.createElement(App, {user: {name: "Hermione"}}), 
  document.getElementById('app'))
);

을을렌렌 렌다다다다다【DOM】【Hermione】【헤르미오네】프로파일을 렌더링하면 "볼드모트"가 출력됩니다.앱이 틀렸습니다.' '볼드모트'라고 써있잖아요.user.name '를 출력하고 볼드모트'인데 이미 '헤르미온느'를 출력하고 있어서 변경하기엔 너무 늦었어요.

앱의 각 부분에 따라 값이 달라집니다.

소품 수정은 양방향 바인딩이 됩니다.

소품 돌연변이는 쌍방향 결합의 한 형태일 것입니다.트리 상위에 있는 다른 컴포넌트에 의존할 수 있는 값을 변경합니다.

Angular 1은 이 기능을 가지고 있어 언제 어디서나 데이터를 변경할 수 있습니다.작동하기 위해서는 주기적인 $digest가 필요했다.기본적으로 모든 데이터의 전파가 완료될 때까지 DOM을 재렌더링하면서 루프를 반복하게 됩니다.이것이 앵글1이 이렇게 느린 이유 중 하나였다.

「」입니다.state ★★★★★★★★★★★★★★★★★」props달리하다state하면 컴포넌트는할 수 , 「」는 「」를 참조해 주세요.props아이들에게 그 가치를 전파하는 메카니즘입니다.

React 디자이너가 이러한 방식으로 구축된 애플리케이션을 쉽게 유지 관리할 수 있다는 이유만으로 아이들은 소품을 통해 얻는 가치를 스스로 변경할 수 없습니다.요점은 하나의 컴포넌트만이 상태를 갱신할 수 있게 되면 누가 상태를 변경했는지, 그리고 버그의 근원을 찾는 것이 더 쉬워진다는 것입니다.

컴포넌트 자체의 상태가 변화하고 자신의 상태가 아닌 어린이 소품도 변화합니다.

<Parent>
  <Child name={ this.state.childName } />
</Parent>

부모는 자신의 상태를 바꿀 수도 있고 자녀 이름을 바꿀 수도 있지만, 자녀들을 위한 소품도 바꿀 수 있습니다.

edit1: 자녀에서 부모로 이벤트를 호출하려면 다음과 같은 이벤트핸들러를 자녀에게 전달해야 합니다.

var Child = React.createClass({
  render: function() {
    return (<button onClick={ this.props.onClick }>Hey</button>);
  }
});

var Parent = React.createClass({
  onChildClick: console.log.bind(console), // will print the event..
  render: function() {
    return (<Child onClick={ this.onChildClick } />);
  }
});

React.renderComponent(<Parent />, document.body);

이 코드에서 Child's 버튼을 클릭하면 이벤트가 부모에게 전달됩니다.이벤트 전달의 목적은 컴포넌트를 분리하는 것입니다.어쩌면 앱에서는 이 특정 액션이 필요하지만, 다른 앱에서는 다르게 사용합니다.

나의 해결책은 꽤 달랐지만, 어떤 사람들은 그것에 부딪힐지도 모른다.Chrome Dev 툴에서는 소품이 읽기 전용으로 되어 있어, 더 이상 전달하려고 하면 에러가 납니다.render() .대신 제 컴포넌트를 이렇게 불렀습니다.

const Navigation = () =>{

    return (
        <div className="left-navigation">
            <ul>
                <Link to='/dashboard'><li>Home</li></Link>
                <Link to='/create-seedz'><li>Create Seedz</li></Link>
                <Link to='/create-promotion'><li>Create Promotion</li></Link>
                <Link to='/setting'><li>Setting</li></Link>
                <SignOutButton  />
            </ul>
        </div>
    );
}

렌더링 방식을 추가해서 소품을 물려줄 수 있다는 문제를 해결했습니다.

class Navigation extends Component{
render(){
    return (
        <div className="left-navigation">
            <ul>
                <Link to='/dashboard'><li>Home</li></Link>
                <Link to='/create-seedz'><li>Create Seedz</li></Link>
                <Link to='/create-promotion'><li>Create Promotion</li></Link>
                <Link to='/setting'><li>Setting</li></Link>
                <SignOutButton user={this.props.user} signedOut={this.props.signedOut} authed={this.props.authed}/>
            </ul>
        </div>
    );
}
}

이게 도움이 됐으면 좋겠는데

여기에 나와 있는 답변과는 달리, "리액트 방식"에 대한 현학적인 서클 애호가에게 반항하는 것을 꺼리지 않는다면, 실제로 소품을 직접 업데이트할 수 있습니다.React.js에서 다음 코드 행을 찾습니다.

Object.freeze(element.props);
Object.freeze(element);

댓글로 남겨주세요.부일라, 변이 소품!

언급URL : https://stackoverflow.com/questions/26089532/why-cant-i-update-props-in-react-js