Question

我有一个功能性的反应成分。它不使用任何道具，只返回元素。反正我有传递道具吗？是否有任何协议？代码会低于有效的React代码吗？

n-1

Answer 1

它完全有效，不需要道具。它与任何其他函数相同，如果它没有参数，则不要给它任何参数。 :-)

Answer 2

由于功能React组件只是javascript函数，因此对它们的适用规则与对任何功能的适用规则相同。您可以安全地忽略未使用的参数。

Answer 3

不，你不知道。 props被显式传递给每个组件。如果您不使用其中的任何property，则不要声明它。就像您的示例一样。考虑以下

const App = () => <Child />

const Child = props => {
    console.log(props) // { }
    return <div>hey</div>
}

在这种情况下，props只是一个空的Object，不需要声明argument。如果您不需要阅读它，甚至不用提它

const Child = () => <div>hey</div>

Answer 4

您提到的代码有效。

模式A

        for (int i = 0; i <= linecount; i = i + 2)
        {
            string currentline = System.IO.File.ReadLines(datafile).Skip(i).Take(1).First();
            string[] splitline = currentline.Split(' ');
            array1[i] = splitline[0].Trim(new char[] { '>' });
        }

模式B

// span on single line and returns by default..
const Test = () => <div>Hello</div>

模式C

// span on multiple lines, still returns by default a single node
const Test = () => 
 <div>
  Hello
 </div>

错误..

//span on multiple lines, but grouped by a paranthesis
const Test = () => (
 <div>
  Hello
 </div>
)

模式D：

//tryin to group with braces..
const Test = () => {
 <div>
  Hello
 </div>
}

注意：无法在反应中返回多个节点。所有节点的根必须有一个单亲。花括号{}失败的原因是，它用于对多个节点或代码片段进行分组。

//容器 //从另一端破坏道具

// group by braces, so you have to return explicitly
const Test = () => {
 const greeting = 'hello'

 return (
  <div>
   {greeting}
  </div>
 )
}

//孩子：从这里破坏

 render() {
    const obj = {
     name: 'john',
     isAdmin: true,
    }

  return <Child {..{ obj }} {...this.props} />
 }

//容器 //发送时解构

const Child = ({ obj, ...props }) => {
 const { value1-in-props, value2-in-props } = props
}

//子：毁灭

 render() {
    const obj = {
     name: 'john',
     isAdmin: true,
    }

  return <Child {..obj} {...this.props} />
 }

是否必须通过道具来对功能组件做出反应？

4 个答案: