Question

我可能无法正确地解决这个问题，但是我正在与React Router文档中的this example一起关注。就我而言，来自补充工具栏的链接之一需要在其中具有嵌套参数（例如['aaapple', 'aaappllle', 'aaappllleee', 'aaappleee', 'aaappllleee', 'appllle', 'aaappllle', 'aaappllleee', 'appllleee', 'aaappllleee', 'appleee', 'aaappleee', 'aaappllleee', 'appllleee', 'aaappllleee']），以便我的补充工具栏看起来更像这样：

'''
init    = initial text supplied to edit
prompt= Decoration presented before the text (not editable and not returned)
'''
def text_editor(init='', prompt=''):

    term_width = shutil.get_terminal_size()[0]
    ptr = len(init)
    string = list(init)
    prompt = list(prompt)


    c = 0
    while True:
        if ptr and ptr > len(string):
            ptr = len(string)

        copy = prompt + string.copy()
        if ptr < len(string):
            copy.insert(ptr+len(prompt),'|')

        #Line wraps support:
        if len(copy) > term_width:
            cut = len(copy) + 3 - term_width
            if ptr > len(copy) / 2:
                copy = ['<']*3 + copy[cut:]
            else:
                copy = copy[:-cut] + ['>']*3 

        print('\r'*term_width+''.join(copy), end=' '*(term_width-len(copy)))

        if c in (53,54):
            #Page up/down bug
            c = readchar.readkey()
            if c == '~':
                continue
        else:
            c = readchar.readkey()  


        if len(c) > 1:
            #Control Character
            c = ord(c[-1])
            if c == 68:     #Left
                ptr -= 1
            elif c == 67:   #Right
                ptr += 1
            elif c == 53:   #PgDn
                ptr -= term_width // 2
            elif c == 54:   #PgUp
                ptr += term_width // 2
            elif c == 70:   #End
                ptr = len(string)
            elif c == 72:   #Home
                ptr = 0
            else:
                print("\nUnknown control character:", c)
                print("Press ctrl-c to quit.")
                continue
            if ptr < 0:
                ptr = 0
            if ptr > len(string):
                ptr = len(string)


        else:

            num = ord(c)
            if num in (13, 10):     #Enter
                print()
                return ''.join(string)
            elif num == 127:        #Backspace
                if string:
                    string.pop(ptr-1)
                    ptr -=1
            elif num == 3:          #Ctrl-C 
                exit(1)
            else:
                string.insert(ptr, c)
                ptr += 1

print("Result =", text_editor('Edit this text', prompt="Prompt:"))

如果用户导航到/bubblegum/:brand/nutrition，如何将<ul style={{ listStyleType: "none", padding: 0 }}> <li> <Link to="/">Home</Link> </li> <li> <Link to="/bubblegum">Bubblegum</Link> </li> {brand && <> <li>Selected Gum: {brand}</li> <li> <Link to="/bubblegum/{brand}/nutrition">Nutritional Information</Link> </li> <li> <Link to="/bubblegum/{brand}/history">History</Link> </li> </> } <li> <Link to="/shoelaces">Shoelaces</Link> </li> </ul>中的/bubblegum/juicyfruit/nutrition替换为{brand}？如果此补充工具栏位于Link的{{1}}中，我知道我可以看一下juicyfruit，但由于补充工具栏是独立的，因此无法访问component。 / p>

Answer 1

将this.props.match从父组件传递到补充工具栏组件...

<Sidebar brand={this.props.match.params.brand}
  ...

或使用withRouter()（https://reacttraining.com/react-router/core/api/withRouter）将match道具直接动态添加到组件：

// import withRouter
import { withRouter } from "react-router";

// in your render function of Sidebar component you now have access to `match`
const { match } = this.props;

// use it in your JSX
<li>
  <Link to={`/bubblegum/${match.params.brand}/history`}>History</Link>
</li>

// using `withRouter` requires wrapping your export
export withRouter(Sidebar)...

如何从侧边栏或导航中的React Router获取活动参数值以创建链接？

1 个答案: