javascript - 如何将值从父组件传递到子组件( react )

我是刚接触React的新手，并试图将我从ParentComponent(通过输入框)中的用户输入获取的值传递到ChildComponent中-我将使用用户输入值来运行AJAX称呼。

我以为通过替换ParentComponent中的状态会起作用-但我仍然无法在ChildComponent中捕获它。

我还只希望ChildComponent仅在从ParentComponent接收到输入值后才能运行/渲染(这样我就可以运行AJAX调用然后进行渲染...)。

有小费吗？

var ParentComponent = React.createClass({
     getInitialState: function() {
         return {data: []};
     },

    handleSearch: function(event) {
        event.preventDefault();
        var userInput = $('#userInput').val();
        this.replaceState({data: userInput});
    },

    render: function() {
        return (
            <div>
                <form>
                    <input type="text" id="userInput"></input>
                    <button onClick={this.handleSearch}>Search</button>
                </form>
                <ChildComponent />
                {this.props.children}
            </div>
          );
        }
    });

var ChildComponent = React.createClass({
   render: function() {
        return <div> User's Input: {this.state.data} </div>
       }
   });

最佳答案

您应该将父状态作为 Prop 传递给 child :将父渲染中的child组件更改为:

<ChildComponent foo={this.state.data} />

然后您可以通过this.props.foo在ChildComponent内部访问它。

说明:在ChildComponent内部，this.state.someData引用ChildComponent状态。而且您的 child 没有状态。 (顺便问一下)

另外:this.setState()可能比this.replaceState()更好。

更好地初始化父状态

return { data : null };

关于javascript - 如何将值从父组件传递到子组件( react )，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33457441/