Question

所以，我认为这是格式化问题，或者我不清楚动态构建时返回的工作原理。

结果中的渲染函数有效，如果我用其他任何替换代码，它会渲染到我想要的位置。同样，Results函数中的console.log正确输出数据。没有错误，它只是不呈现html而且它没有在SynonymElement中点击调试器。

我在这里缺少什么/我误解了什么核心概念？

（这只是一个输入单词，一个单词，用户点击提交，它返回一个对象，单词作为键，值为一个synonynms数组，在ul中呈现）

'use strict'

const Smithy = React.createClass({
  dsiplayName: "Smithy",

  getInitialState: function() {
    return { data: []};
  },

  handleSubmit: function(data) {
    $.get('/get-synonyms', { data: data.data }).done(function(data) {
      this.setState({ data: data})
    }.bind(this));
  },

  render: function() {
    return (
      <div className="smithy">
        <h1>Craft Tweet</h1>
        <SmithyForm onSubmit={this.handleSubmit} />
        <Results data={this.state.data} />
      </div>
    )
  }
})

const SmithyForm = React.createClass({
  displayName: "SmithyForm",

  getInitialState: function() {
    return { placeholder: "tweet", value: "" };
  },

  handleChange: function(event) {
    this.setState({value: event.target.value});
  },

  handleSubmit: function(event) {
    event.preventDefault();
    var tweet = this.state.value.trim();
    this.props.onSubmit({ data: tweet });

    this.setState({value: ''});
  },

  render: function() {
    var placeholder = this.state.placeholder;
    var value = this.state.value;
    return (
      <form className="smithyForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder={placeholder} value={value} onChange={this.handleChange} />
        <button>smithy</button>
      </form>
    );
  }
})

const SynonymElement = React.createClass({
  render: function() {
    debugger
    return (
        <li>{this.props.data}</li>
    )
  }
})

const Results = React.createClass({
  render: function() {
    var words = this.props.data;

    return (
        <div className="results">
         {
           Object.keys(words).map(function(value) {
             { console.log(value) }
          <div className={value}>
            <ul>
             {
              words[value].map(function(syn) {
                { console.log(syn) }
                return <SynonymElement data={syn} />
              })
             }
            </ul>
          </div>
          })
         }
        </div>
    )
  }
})

ReactDOM.render(<Smithy />, document.getElementsByClassName('container')[0])

Answer 1

可能还有其他一些复杂的问题，但假设其他所有内容都正确连接，你需要将传递给第一个地图的函数的结果（在集合Object.keys(words)上）返回，就像你以后一样map否则执行该函数并且不返回任何有用的内容。

可能只是loop inside React JSX

的欺骗

return (
  <div className="results">
  {
    Object.keys(words).map(function(value) {
      return (   // <-- this 
        <div className={value}>

React render具有正确的数据，但不会渲染JSX

1 个答案: