带有样式组件的条件样式

Question

一种风格如何有条件地使用样式组件？

我有一个接受道具的基本组件，但它似乎不起作用（可能是非常愚蠢的事情）：

import React from 'react';
import styled from 'styled-components';

const Header = styled.h1`
  color: ${props => (props.name === 'john' ? 'red' : 'blue')};
`;

export default ({ name }) => <Header>Hello {name}!</Header>;

Answer 1

您必须将道具传递给Header组件：

export default ({ name }) => <Header name={name}>Hello {name}!</Header>;

Answer 2

您没有将名称道具传递给标题组件，应该是：

import codecs
print(len(b'\x32'), b'\x32')                # 1 hex literal, '\x32' == '2'
print(len(b'\\x32'), b'\\x32')              # 4 chars including escapes
print(codecs.escape_decode('\\x32', 'hex')) # chars->literal, 4->1

# 1 b'2'
# 4 b'\\x32'
# (b'2', 4)

s = '\\xa5\\xc0\\xe6aK\\xf9\\x80\\xb1\\xc8*\x01\x12$\\xfbp\x1e(4\\xd6{;Z'
ed, _ = codecs.escape_decode(s, 'hex')
print(len(s), s)
print(len(ed), ed)

# 49 \xa5\xc0\xe6aK\xf9\x80\xb1\xc8*$\xfbp(4\xd6{;Z
# 22 b'\xa5\xc0\xe6aK\xf9\x80\xb1\xc8*\x01\x12$\xfbp\x1e(4\xd6{;Z'

Answer 3

export default ({ name }) => <Header>Hello {name}!</Header>;

在这种情况下，Header Component没有您定义的任何道具。在React道具就像html属性一样。但是在您的代码中，Hello {name}是React子级，因此props.name的值为undefined。

Answer 4

你需要传递道具。最后一行代码需要修改为export default ({ name }) => <Header {...props}>Hello {name}!</Header>;