Question

我正在阅读React offial网站，在那里我遇到了这个问题。 React官方网站声明我们可以在JSX中使用功能代码。因此，我尝试使用代码，但它无法正常工作。

类ABCD扩展了React.Component {

render() {
    return (
        <div>
            <p>
                {() => <div>Hello World </div>}
            </p>
        </div>
    );
}

}

我知道，我知道，有些人可能会说看看React网站上给出的例子。我看到它，官方网站上给出的例子涉及外部功能。我只想知道我们可以独立使用JSX中的函数。

有关其他信息，请参阅此链接：https://reactjs.org/docs/jsx-in-depth.html

Answer 1

我觉得你要做的事情是错的。

JSX无法解析对象或函数

如果您只是尝试

cb_var

您正在尝试插入或返回函数，这不能作为演示节点。它应该是jsx 解析的东西。 JSX无法解析对象或函数，它们应该由Javascript引擎解析。

你可以做的是定义你的方法并立即调用它，这样函数（iife函数）就会返回一些可以被JSX解析的东西。

像
这样的东西
import tkinter as tk root = tk.Tk() checkbutton_frame = tk.Frame(root) checkbutton_frame.grid(row=1, column=0) def display(cb_list, cb_var): # clear listbox selected_item.delete(0, 'end') # add selected items in listbox for text, var in zip(cb_list, cb_var): if var.get(): # the checkbutton is selected selected_item.insert('end', text) def init_checkbuttons(cb_list, cl=1): # destroy previous checkbuttons (assuming that checkbutton_frame only contains the checkbuttons) cbs = list(checkbutton_frame.children.values()) for cb in cbs: cb.destroy() # clear listbox selected_item.delete(0, 'end') # create new checkbuttons cb_var = [] # to store the variables associated to the checkbuttons for r, op in enumerate(cb_list): var = tk.BooleanVar(root, False) cb = tk.Checkbutton(checkbutton_frame, variable=var, text=op, relief='ridge') cb.grid(row=r, column=cl, sticky="w") cb_var.append(var) # change display command display_button.configure(command=lambda: display(cb_list, cb_var)) cb_list = ['pencil', 'pen', 'book', 'bag', 'watch', 'glasses', 'passport', 'clothes', 'shoes', 'cap'] cb_list2 = ['ball', 'table', 'bat'] selected_item = tk.Listbox(root, width=30, height=20) selected_item.grid(row=1, column=6, padx=20, pady=20, columnspan=2, sticky='e') display_button = tk.Button(root, text='DISPLAY') display_button.grid(row=1, column=8, padx=20, pady=20) tk.Button(root, text='Change list', command=lambda: init_checkbuttons(cb_list2)).grid(row=2, column=8) init_checkbuttons(cb_list) root.mainloop()

希望你明白这一点。返回可由JSX解析的内容。

Answer 2

只需调用一个返回JSX的函数。例如：

class FooComp extends React.Component {
    someFunction() {
        return (<div>Hello World!</div>);
    }

    render() {
        return (
            <div>
                    <p>
                        {this.someFunction()}
                    </p>
            </div>
        );
    }
}

Answer 3

您可以尝试将其称为中间调用函数

render() {
    return (
        <div>
            <p>
                {(() => <div>Hello World </div>)()}
            </p>
        </div>
    );
}

Answer 4

除了在其他答案中提到的立即调用的功能之外，the documentation mentions还可以将函数用作子代，可以将其作为props.children(...args)来调用。

关键是组件必须最终返回可渲染的内容：

传递给自定义组件的子对象可以是任何东西，只要该组件将它们转换为React可以在渲染之前理解的东西即可。这种用法并不常见，但是如果您想扩展JSX的功能，它会起作用。

Answer 5

尽管从您的问题中尚不清楚您要在jsx中定义函数还是要从jsx调用函数。如果要在jsx中定义函数，则应使用：

class ABCD extends React.Component {
   render() {
      return (
         <div>
             <p>
                 {(() => {<div>Hello World </div>})()}
             </p>
         </div>
      );
   }
}

如果要从jsx调用函数，则应使用：

class ABCD extends React.Component {
   show() {
        return (<div>Hello World!</div>);
   }
   render() {
        return (
            <div>
                    <p>
                        {this.show()}
                    </p>
            </div>
        );
    }
}

如何在JSX中使用函数

5 个答案: