Question

在SearchBar类的渲染中，我无法使用注入的Javascript获取无序列表以在浏览器中显示。方法中是否有错误，或者我需要做些什么才能使Javascript出现？

import React from 'react';
import './searchbar.css';

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
}

class SearchBar extends React.Component {
    renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
  });
}
  render() {
   return (
     <div className="SearchBar">
       <div className="SearchBar-sort-options">
         <ul>
           {this.renderSortByOptions()}
         </ul>
       </div>
       <div className="SearchBar-fields">
         <input placeholder="Search Businesses" onChange={this.handleTermChange} />
         <input placeholder="Where?" onChange={this.handleLocationChange} />
       </div>
       <div className="SearchBar-submit">
         <a>Let&#39;s Go</a>
       </div>
     </div>
   )
 }
}

export default SearchBar;

Answer 1

你必须在map语句中返回，如下所示：

renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
    return sortByOptionValue;
  });
}

或者你可以保留你的变量赋值并返回它：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();

function drawClock() {
  drawNumbers(ctx, radius);
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for (num = 1; num < 13; num++) {
                               // we start at the center, looking at 12
    ang = num * Math.PI / 6;          // angle from 12 to number in radians
    ctx.fillText("a", 0, 0);
    ctx.rotate(ang);                  // look at the number
    ctx.fillText("b", 0, 0);
    ctx.translate(0, -radius * 0.85); // move to the number
    ctx.fillText("c", 0, 0);
    ctx.rotate(-ang);                 // look to 12 to write the number
                                      // in right position
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);                  // look away from center
    ctx.fillText("d", 0, 0);
    ctx.translate(0, radius * 0.85);  // move to center
    ctx.fillText("e", 0, 0);
    ctx.rotate(-ang);                 // look to 12
    ctx.fillText("f", 0, 0);
  }
}

请注意，这是简单的Javascript功能，无论框架如何都可以使用：）

Answer 2

我通过在renderSortByOptions（）方法之后添加一个return语句找到了修复。

 import React from 'react';
import './searchbar.css';

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
}

class SearchBar extends React.Component {
    renderSortByOptions() {
  return Object.keys(sortByOptions).map(sortByOption => {
    const sortByOptionValue = sortByOptions[sortByOption];
    return <li

        key= {sortByOptionValue}
       >{sortByOption}</li>;
  });
}
  render() {
   return (
     <div className="SearchBar">
       <div className="SearchBar-sort-options">
         <ul>
           {this.renderSortByOptions()}
         </ul>
       </div>
       <div className="SearchBar-fields">
         <input placeholder="Search Businesses" onChange={this.handleTermChange} />
         <input placeholder="Where?" onChange={this.handleLocationChange} />
       </div>
       <div className="SearchBar-submit">
         <a>Let&#39;s Go</a>
       </div>
     </div>
   )
 }
}

export default SearchBar;

在ReactJS文件中注入Javascript不呈现

2 个答案: