Question

我最近开始尝试反应，我试图突破界限（至少在我看来它似乎是魔术）。

我正在尝试创建一个使用动态数据结构发布到预定义API的组件，即我想将数据参数作为道具传递。这是我当前的AJAX代码示例：

  createModalSubmit(form) {
    var name = this.refs.name.value;
    $.ajax({
      url: `/items.json`,
      type: 'POST',
      data: item:{name: name} ,
      success: (item) => {
        this.setState({
          item: {
            name: ''
          },
          errors: {},
          showModal: false
        });
      },
      error: (item) => {
        this.setState({errors: item.responseJSON.errors})
      }
    });
  },

如何在这段代码中将数据属性作为道具传递？我尝试将其作为一种功能，即：

  formData() {
    return {
      myData: {
        item: {
          name: name
        }
      }
    }
  },

然后将其作为'this.formData'传递给我的数据属性，但这似乎并不能提供快乐。

我也试过使用vars，但上面的功能方法对我来说最有意义。

将动态值传递给ajax js调用的最佳方法是什么？

Answer 1

以下是如何在React中将动态值传递给ajax调用的示例：http://codepen.io/PiotrBerebecki/pen/ZpRyKb

在示例中，父组件App正在维护一个包含url的对象的状态。然后，父组件通过道具为其子项（Time和Photo）提供单独的URL。

这是完整的代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      urls: {
        time: 'http://date.jsontest.com',
        photos: 'http://jsonplaceholder.typicode.com/photos'
      }
    };
  }

  render() {
    return (
      <div>
        <Time url={this.state.urls.time} />
        <Photo url={this.state.urls.photos} />
      </div>
    );
  }
}


class Time extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response.time,
        });
      }
    });
  }

  render() {
    let content;

    if (this.state.data) { 
      content = (
        <div>
          <h1>Current Time</h1>
          <p>{this.state.data}</p>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

class Photo extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response,
        });
      }
    });
  }

  render() {
    let content;

    if (this.state.data) { 
      content = (
        <div>
          <h1>Photo</h1>
          <img src={this.state.data[0].url}/>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,  document.getElementById('content')
);

在AJAX js调用中动态分配值

1 个答案: