不从React中的功能渲染JSX

Question

该函数获取按钮单击的值作为道具。 通过映射数据来将该按钮值与Data JSON中称为“类”的键进行比较。 我正确地获取了所有数据。 我所有的console.logs都返回正确的值。 但是由于某种原因，我无法渲染任何东西。

我试图添加两个return语句。 它甚至没有使用单词“ TEST”来渲染p标签。 我想念什么吗？ 我已包含一个代码沙箱： https : //codesandbox.io/s/react-example-8xxih

例如，当我单击“数学”按钮时，我想在按钮下方以两个气泡显示两位教数学的老师。 所有数据正在加载。 渲染时遇到问题。

function ShowBubbles(props){
    console.log('VALUE', props.target.value)
   return (
       <div id='bubbles-container'>
          <p>TEST</p> 
       {Data.map((item,index) =>{
        if(props.target.value == (Data[index].classes)){
          return (
               <Bubble key={index} nodeName={Data[index].name}>{Data[index].name}
              </Bubble>    
          )

        }
    })}
    </div>
   )
}

Answer 1

这里的问题是ShowBubbles并未呈现到DOM中，而是（根据沙盒）在ShowClick处理器中直接调用了ShowBubbles（一个React组件）。 从技术上讲，虽然可以执行此操作，但从功能上调用组件实际上会生成JSX，并且需要手动将其插入DOM。

采用这种方法不是很容易，而且通常有一种更简单的方法来实现。 一种这样的方法是直接从另一个React组件调用ShowBubbles，例如，在按钮之后使用类似以下内容的方法：

<ShowBubbles property1={prop1Value} <etc...> />

您还需要解决代码中的其他一些问题（至少在沙箱中），但这至少有助于您朝正确的方向发展。

Answer 2

沙盒链接： https ： //codesandbox.io/embed/react-example-m1880

 import React, {Component} from 'react'; import ReactDOM from 'react-dom'; const circleStyle = { width: 100, height: 100, borderRadius: 50, fontSize: 30, color: "blue" }; const Data = [ { classes: ["Math"], name: "Mr.Rockow", id: "135" }, { classes: ["English"], name: "Mrs.Nicastro", id: "358" }, { classes: ["Chemistry"], name: "Mr.Bloomberg", id: "405" }, { classes: ["Math"], name: "Mr.Jennings", id: "293" } ]; const Bubble = item => { let {name} = item.children.singleItem; return ( <div style={circleStyle} onClick={()=>{console.log(name)}}> <p>{item.children.singleItem.name}</p> </div> ); }; function ShowBubbles(props) { var final = []; Data.map((item, index) => { if (props.target.value == Data[index].classes) { final.push(Data[index]) } }) return final; } function DisplayBubbles(singleItem) { return <Bubble>{singleItem}</Bubble> } class Sidebar extends Component { constructor(props) { super(props); this.state = { json: [], classesArray: [], displayBubble: true }; this.showNode = this.showNode.bind(this); } componentDidMount() { const newArray = []; Data.map((item, index) => { let classPlaceholder = Data[index].classes.toString(); if (newArray.indexOf(classPlaceholder) == -1) { newArray.push(classPlaceholder); } // console.log('newArray', newArray) }); this.setState({ json: Data, classesArray: newArray }); } showNode(props) { this.setState({ displayBubble: true }); if (this.state.displayBubble === true) { var output = ShowBubbles(props); this.setState({output}) } } render() { return ( <div> {/* {this.state.displayBubble ? <ShowBubbles/> : ''} */} <div id="sidebar-container"> <h1 className="sidebar-title">Classes At School</h1> <h3>Classes To Search</h3> {this.state.classesArray.map((item, index) => { return ( <button onClick={this.showNode} className="btn-sidebar" key={index} value={this.state.classesArray[index]} > {this.state.classesArray[index]} </button> ); })} </div> {this.state.output && this.state.output.map(item=><DisplayBubbles singleItem={item}/>)} </div> ); } } ReactDOM.render(<Sidebar />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script> <div id="root"></div>