Question

我想了解props和state的来去和去法。我正在评论我理解的代码片段，但还有其他一些我无法理解，因为我没有得到正在发生的事情。

或者在这里你也可以看到代码：

      class TodoList extends React.Component {
        // THIS IS THE PARENT COMPONENT

        // WE DECLARE THE TYPE OF PROPS
        static propTypes = {
          todos: React.PropTypes.array
        }
        // INITIAL STATE OF THE COMPONENT
        constructor(props) {
          super(props)
          this.state = { todos: this.props.todos || [] }
        }

        addTodo = (item) => {
          // WE START MODIFYING THE STATE OF THE COMPONENT
          this.setState({todos: this.state.todos.concat([item])});
        }

        render () {
          return (
            <div className="panel panel-default TodoList">
              <h3>TODO List</h3>
              <TodoItems items={this.state.todos}/>
              <TodoInput addTodo={this.addTodo}/>
            </div>
          );    
        }
      };

      class TodoItems extends React.Component {

        static propTypes = {
          items: React.PropTypes.array.isRequired
        }

        constructor(props) {
          super(props);
        }

        render () {
        let createItem;

          createItem = (item, index) => {
            return (
              <li key={index} className="list-group-item">{item}</li>
            );
          };
        return (
            <ul className="TodoItems list-group">
              {this.props.items.map(createItem)}
            </ul>
          );
        }
      };

      class TodoInput extends React.Component {

        constructor (props) {
           super(props);
           this.state = {item: ''};
        }

        onChange = (e) => {
          this.setState({item: e.target.value});
        }

        handleSubmit = (e) => {
          e.preventDefault();
          this.props.addTodo(this.state.item);
          this.setState({item: ''});
        }

        render () {
          return (
            <form onSubmit={this.handleSubmit} className="TodoInput">
              <div className="input-group">

                <input type="text"
                       className="form-control"
                       placeholder="Search for..."
                       onChange={this.onChange} value={this.state.item}/>

                <span className="input-group-btn">
                  <input className="btn btn-default"
                         type="submit" value="Add" />
                </span>

              </div>
            </form>
          );
        }
      };


      React.render(<TodoList todos={['red','blue']}/>, document.getElementById('container'));

如何解释onChange组件在TodoItems组件上的作用。

或者你如何解释这样的代码：

<TodoItems items={this.state.todos}/>
<TodoInput addTodo={this.addTodo}/>

为什么this.state.todos设置props以及为什么名称addTodo={}设置为this.addTodo？

Answer 1

通过向JSX添加属性（TodoItems＆gt; items和TodoItems＆gt; addTodo），父组件将道具传递给组件。道具可以是数据（简单类型，数组等），但也可以引用父组件中的回调方法。这些回调可用于将数据从组件传递到其父组件。在组件中，您应该将op props视为不可变对象。所以你不应该改变一个属性的值。

在您的示例中，todo（数据）的列表正在从一个组件的状态传递到底层（TodoItems）组件的属性。 TodoInput有一个'addTodo'属性，可用于向'TodoInput'组件提供一个函数（回调），该组件应在用户输入todo时调用。当您通过属性向组件提供回调时，您永远不会提供参数（'this.addTodo'与'this.addTodo（“Do this”）'），因为您只希望指向回调的指针而不是返回函数的值。

在您的示例中，组件'TodoList'负责维护待办事项列表。这就是列表保持在此组件状态的原因。状态中的每个更改（通过使用'setState'方法调用）都会导致重新呈现'TodoList'组件。由于'TodoList'组件负责列表，因此'TodoInput'组件必须向'TodoList'组件提供新项。这是通过使用在用户添加新信息时从“TodoInput”组件调用的“addTodo”回调来完成的。

请同时查看Flux模式，因为在该模式中，组件本身不负责数据存储，而是存储。对于较大的应用程序，此模式可以帮助您创建更稳定的React应用程序。

什么在做这个React组件的每个部分，状态和道具是如何进出的？

1 个答案: